Signup
Signup
 
  1. Help
  2. Advanced
  3. Sharing, embedding & notifications
  4. Turn your typeform into a chat

Turn your typeform into a chat

We're currently testing a new version of the Share panel. If the share page that you see is different from the version described below, then you're a part of this test. All of the functionality is the same, but if you have any difficulty using it, please reach out to our Support team, using the button at the end of this article.

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

chat_1.png

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:

shareoptionsmini.png

Now you can see what your typeform would look like as a chat! Just start your typeform from the preview panel on the right:

newchat1.png

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:

skip1.png

And a text-based question:

skip2.png

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.) 

newchat2.png

HC_BobRoss_ilu_cropped.png
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:

newchat3.png

You can also turn on Typing emulation, by opening the Advanced menu, and switching the toggle to blue:

newchat4.png

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:

standardchat.png

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:

standardcode.png

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".

HC_Note_new.png
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.

unread_turntypeformintochat.png

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. 

customlaunch1.png

Test your Popover by clicking the button in the preview on the right:

popovertest.png

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".

HC_BobRoss_ilu_cropped.png
Tip! Recall Information and Logic 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.

Tap into our community knowledge

Find Answers
Contact Support