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 conversation, click Share, then select Start a chat.
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 conversation.
3. In Full-page mode, you can add an avatar to your conversation, by opening the Design menu:
You can also turn on Typing emulation, by opening the Advanced menu, and switching the toggle to green:
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 conversation 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 with conversations, don't add them after the form ID, but use additional data attributes in the conversation code instead. For example, you can add data-cui-hidden-name="Carlos" or data-cui-hidden-city="Barcelona" to the code.
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 Conversations 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 Typing emulation in the Advanced menu, as described above.
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.
Tip! Recall Information and Logic Jumps were destined to be used in chats ;) People interacting with your chats will feel like you’re actually talking to them when you call them by their name or when they see your questions pop up based on their answers.
{[{article.replace}]}
{[{video.duration}]}