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:
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 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). The link will include any Hidden Fields you have added.
Standard embed
Use the Design menu to customize various aspects of the Standard embed's design. You can choose to Add an avatar, and also 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 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'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 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'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".