Turn your typeform into a chat
Find out how to turn your typeform into a chat and embed it on your web page.
Before getting started, you can also check out our useful tips and tricks to sound more conversational online here, and learn what a CUI is here.
Drumroll … and let the chat begin:
1. Open the typeform you want to turn into a chat, click Share, then select Start a chat.
Alternately, if your typeform hasn't been published yet, click Publish from the Create panel and choose the Chat option from the pop-up menu:
Now you can see what your typeform would look like as a chat! Just start your typeform from the preview panel on the right:
2. Click Full-page, Standard or Popover to select the way you’d like to share your chat.
3. In Full-page mode, you can add an avatar to your chat, by opening the Design menu:
You can also turn on Typing emulation, by opening the Advanced menu, and switching the toggle to blue:
Choose your preferred typing emulation speed in the drop down menu.
Click the Copy button at the bottom, to get your Typeform link to share on your web page (etc).
4. For a Standard embed, open the Design menu, and you can choose to Add an avatar, and also choose the size of the chat window you want to include on your site:
Turn on Seamless mode, for a transparent background that will easily fit into your website design.
Open the Advanced menu to toggle typing emulation and speed, just like with Full-page mode above.
When you're happy with your settings, click the Get the code button, and then add this to your web page:
If you want to use Hidden Fields, don't add them after the form ID, but use additional data attributes in the chat code instead, in the format data-tf-hidden="field=value, field2=value2,field3=value3". For example, if you have Hidden Fields for "name" and "city", you would add the following attribute to the code: data-tf-hidden="name=Carlos,city=Barcelona".
Note! You can add any image file as your avatar, and the maximum file size of the uploaded image is 2 MB.
5. In Popover mode, open the Design menu to add an avatar, and choose the color of the chat button. Click the teardrop icon and choose a color, or type in a hex color code to match your web design.
You can also add a greeting message to encourage visitors to open your chat and a custom icon that will show instead of the default chat icon.
Finally, you can display a notification dot on your popover to let visitors know there's an unread message. The Hide after interaction box lets you adjust the number of days that the dot is hidden after the visitor interacts with the chat.
You can add Typing emulation in the Advanced menu, as described above.
In the Advanced menu, toggle Custom launch options to control when the Popover shows up for site visitors: when they load the page, when they try to leave the page ("exit intent"), after a certain amount of time spent on the page, or after they've scrolled down part of the page.
Test your Popover by clicking the button in the preview on the right:
When you've chosen your settings, just click Get the code, then paste it wherever you need it.
If you want to use Hidden Fields, don't add them after the form ID, but use additional data attributes in the chat code instead, in the format data-tf-hidden="field=value, field2=value2,field3=value3". For example, if you have Hidden Fields for "name" and "city", you would add the following attribute to the code: data-tf-hidden="name=Carlos,city=Barcelona".
