Sometimes you want your customers to engage with you in a more structured manner and have them fill in a branded webform on your website. Starting such conversations via a webform can now be a seamless experience, because you can have your webforms simply create a new conversation in Dixa via our API.
- Use your own custom webforms with your own branding to create conversations. 🎨ℹ️
- Create conversations directly via the API - without converting to email first. 📧 ❌
- Important attributes or text format won’t get lost in translation. 🤷♂️💪
Setup for Webform Endpoints in Dixa
In order to set up the foundation to use the new webform endpoints you need to be a Dixa administrator, because you need to be able to access the settings of your organisation in Dixa. It is required that you set up the webform endpoints in your Dixa settings, so you can use the email routing and make sure that flows are triggered for the new conversations that you create via the API endpoint.
1. Go to Settings > Integrations > Webform Endpoints
2. Choose "Add webform endpoint"
3. Fill in the required details:
- Email: Choose the email address that will be used to route the conversations that you are creating from your webform.
- Name: Type a name here, so you can recognise your webform integration easily later.
- Redirect URL: In case you are using the webform integration directly in your website code, please choose a redirect URL where the user should be directed to after submitting the webform. Ideally this would be a success page with a thank you message. The redirect URL is optional, but recommend so that Dixa can redirect to the specified URL after a successful submission of the form.
4. Choose "Add new endpoint" to save the settings
and reveal the uniquely generated URL that you can now insert in your webform:
Using Webform Endpoints
The webform endpoints can receive multiple fields:
- Required fields (please make sure that the naming is correct here in order to avoid errors):
<input type="email" name="email" required> (The email field input will be used for contact recognition or to create a new contact in Dixa.)
<input type="text" name="message" required>
- Optional fields:
<input type="text" name="phone_e164"> (The e164 format requires a +country code followed by the national phone number. Please make sure to convert phone numbers in your forms to this format before submitting.)
<input type="text" name="subject"> (This will be used as the conversation subject in Dixa.)
<input type="text" name="name"> (This refers to first name and last name combined in one field. The name will not automatically overwrite an existing contact name, but will be used in case a new contact is created.)
- Custom fields:
<input type="text" name="my_custom_field"> (Here you can add as many fields as you like and name them however you like.)
All fields that are send from the webform will be added as content to the created conversation in Dixa.
Example for how to use it in a webform:
Highlighted in purple you can see here how to add the URL that you received from the webform endpoint setup into your webform:
<form method="post" action="https://forms.dixa.io/v1/forms/734UO5aJSvUB6t12XJeV1S/wnWMml0UgK7j1x5Yubh2s">
<input type="email" name="email" required> <br>
<input type="text" name="name"> <br>
<input type="text" name="subject"> <br>
<input type="text" name="message" required> <br>
<input type="text" name="phone_e164"> <br>
<input type="text" name="my_custom_field"> <br>
<input type="submit" value="Go!">
Example for how to use it via curl:
Using curl you can create conversations directly via the webform endpoints of the Dixa API, so you can create conversations from e.g. any of your internal systems:
curl --data-urlencode "Cat+name=Figaro" --data-urlencode "Order+No=343434" --data-urlencode "firstname.lastname@example.org" --data-urlencode "message=I would like to know why my cat food order has not arrived yet?" https://forms.dixa.io/v1/forms/734UO5aJSvUB6t12XJeV1S/6GFFBdkbojhGHYCgY1zh7y
Webform Conversations in Dixa
In Dixa you will receive conversations created via the webform endpoints as contact form submissions. The conversation will be routed according to the same flow as the email address that you have chosen during the setup.
The conversation will include all the form fields from your webform and will either be attributed to an existing contact with the same email address or to a newly created contact.
- webform endpoints can currently not be edited, but only deleted.
- no support to upload images in forms.
- no support to attach files to forms.