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, and click Share. Select how you want to share your typeform, then toggle the Turn into a chat switch.
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 in the center:
Respondents can pick one of the options at the bottom of the screen to answer a question, or type in an answer to a Short Text or Long Text question.
Respondents can also skip questions that aren't marked as Required. Here's how the Skip option looks for a choice-based question:
And a text-based question:
2. Click Full-page, Standard or Popover to select the way you’d like to share your chat. (Click the name of each mode to learn more about how it works.)
Tips! If you're an advanced user ready to install some custom code, you can check out this thread in our Community, or head to Typeform's Embed SDK for JavaScript or React to share your chat as a Popup button.
Full-page mode
In Full-page mode, you can add an avatar to your chat, by opening the Customize chat menu:
You can also turn on Typing emulation, and switching the toggle to blue:
Choose your preferred typing emulation speed in the drop down menu.
Click the Start embedding button, to get the embed code and add it to your web page (etc). The code will include any Hidden Fields you have added.
Standard embed
Use the Design menu to customize various aspects of the Standard embed's design, and to choose the size of the chat window you want to include on your site:
For a transparent background that will seamlessly fit in with your website design, use the slider to change the background transparency level.
Open the Customize chat menu to Add an avatar, or to toggle typing emulation and speed, just like with Full-page mode above.
When you're happy with your settings, click the Start embedding button for the embed code, and then add this to your web page:
If you've used Hidden Fields, these will be automatically included in your code after the data-tf-hidden attribute. For example, if you have Hidden Fields for "name" and "city", you'll see the following in the code: data-tf-hidden="name=xxxxx,city=xxxxx".
When you add the code to your website, you can change the default "xxxxx" strings to actual values. For example: 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.
Popover mode
In Popover mode, open the Design menu, 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 for box lets you adjust the number of days that the dot is hidden after the visitor interacts with the chat.
You can add an avatar and set Typing emulation in the Customize chat 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 in the center:
When you've chosen your settings, just click Start embedding, copy the code and then paste it wherever you need it.
If you've used Hidden Fields, these will be automatically included in your code after the data-tf-hidden attribute. For example, if you have Hidden Fields for "name" and "city", you'll see the following in the code: data-tf-hidden="name=xxxxx,city=xxxxx".
When you add the code to your website, you can change the default "xxxxx" strings to actual values. For example: data-tf-hidden="name=Carlos,city=Barcelona".