Picture this: you’ve just opened your neighborhood’s first brick-and-mortar bagel shop, and you’re the talk of the town! With so much business, you don’t have time to answer customer questions one-by-one over email, but you still want to make sure that all of your clients have the best experience possible. With just a few clicks, you can use Typeform Chat to convert a typeform into a chatbot that offers live answers to common questions. Read on to find out how:
In this example, we’ll be using Typeform Chat to create an easy-to-use chatbot for frequently asked questions. Here’s how it’ll look on your site once you’ve set it up:
We’ll be using the following tools to create our chat assistant:
Creating your typeform
The first step for using Typeform Chat is creating the typeform you’ll use to answer visitors’ questions. This typeform will be the basis of your chat assistant, so you’ll want to write the questions in the order that your chat will ask them.
1. From your Workspace, create a new typeform by clicking New typeform.
2. We’ll build our typeform from scratch in this example, but you can choose to incorporate one of our built-in templates.
3. Once you’ve named and created your typeform, click the + sign in the Editor tab of your Create panel to add a Welcome Screen.
Make your visitors feel at home with a friendly greeting. You can even add an emoji or two!
Tip: You can change the button text on your Welcome Screen by clicking the Welcome Screen menu.
Tip: You can use the Description field to add additional text to questions. The content in this field will show up as a separate chat message from the question title, mimicking the flow of a text message conversation and adding visual interest.
4. Use the Design tab to customize your typeform’s appearance according to your brand’s needs. You can use the Template gallery to pick out a pre-designed theme, or create your own with a custom color palette and Unsplash background.
This background image of a flour-dusted countertop combines a simple aesthetic with a wink at your business’ star product:
5. Back on the Editor tab, add a Multiple Choice question to create an FAQ menu. Here, you can learn more about what your visitor is looking for.
You might have many potential FAQ topics, but to keep it simple, we’ll show only a few choices here: learning about the flavors you offer, your delivery radius, your store hours, and subscribing to your newsletter.
We’ll also add a final option for those who have other questions.
Tip: Skipping questions isn’t possible in Chat, so you don’t need to mark typeform questions as required unless you’re planning on using the same typeform elsewhere.
6. Time to add in the answers to each question. Later on, we’ll use Logic to make sure that visitors see the information relating to the question they chose, and are able to return to the main menu afterwards.
We’ll use single selection Multiple Choice questions to provide answers to most of the questions your visitors choose. We want respondents to be able to return to the top FAQ menu after each question, and using single selection questions instead of Statement questions makes this course of action clear.
We need one follow-up Multiple Choice question for each of the first four options in the FAQ menu question. Here’s what one of the questions might look like:
7. Since one of the options in our FAQ menu question was about subscribing to a newsletter, we'll create a follow-up Email question for visitors who choose that option, followed by a single selection Multiple Choice question thanking them for signing up and letting them return to the top FAQ menu:
Tip: You can create an integration with an email management tool like Mailchimp or HubSpot to enroll respondents in your email communications.
While creating your questions, you can insert images and GIFs via the Layout menu to break up the visual flow of your form. Feel free to get creative!
8. While we’re in our Editor tab, we’ll turn the typeform’s Ending into a link to the business’ Contact Us page. Open the Ending floater menu to disable social share icons, change the button text, and add a link.
This Ending will appear to visitors who had other questions not answered by the FAQ menu we’ve created. In the next step, we’ll link that option to the Ending.
9. We’ll use Logic to loop visitors back to the FAQ menu after asking a question, so that they can get answers to multiple queries. From the Create panel, open the Logic tab, switch to the Advanced view, and click Branching and calculations.
First, find the question block that corresponds to your first Multiple Choice question, asking visitors what they were interested in. Within this question block, add four rules that direct each of the question options to the correct follow-up question. Here’s an example of one of the rules you might create:
Remember to create a rule that links the other questions option in the Multiple Choice question to the typeform’s Ending!
Create a rule for question 5, your Email question, so that it flows to the question confirming sign-up:
Finally, add rules for each follow-up Multiple Choice question so that respondents can jump back to the FAQ menu:
To check your work, you can refer to your Logic Map, visible after closing the Branching and calculations menu. Pretend you’re a visitor, and follow various question flows to make sure everything is working as expected.
When you’re happy with your typeform, go ahead and hit Publish in the top right of your screen. Aaaand...we have liftoff! Try out this typeform here:
Setting up a chat embed
Now that you’ve created your typeform, there are only a few short setup steps to turn it into a chat.
1. Head over to the Share panel and click the Start a chat button.
2. Choose how you’d like your chat to be embedded into your webpage. You can choose a full-page, standard, or popover option. Clicking any option will show a preview of how your chat will look to viewers - check out more details about each option here. We’ll choose the Standard option here.
Tip: Choose the Full-page option to share your typeform as a URL that features a chat-style interface. You can also use Hidden Fields here.
3. Click Design in the left-hand menu to easily adjust your chat to the look of your website. You can add a chat avatar, change the size of your chat box, and toggle Seamless mode to blend in your chat against your site colors. Toggling Seamless mode will let you set the transparency of your chat background against your site:
4. To simulate a live chat experience, your respondents will see the chat assistant “typing” before asking each new question. You can set the typing speed or disable this option under Advanced:
5. Now, all that’s left to do is click Get the code to grab the embed code. You can then paste it into the proper location in your site code.
Congratulations! Your FAQ chat assistant is up and running. Give yourself a pat on the back - it’s time to get baking!