1. Help
  2. Advanced
  3. Do more with Typeform
  4. Create a site navigator using Chat

Create a site navigator using Chat

It’s cliché but true: first impressions matter! When new visitors come to your site, you want their experience to be as smooth as possible. By adding Typeform Chat to your homepage, you can automatically direct visitors to the pages they’ll find most helpful. And the best part is that converting a typeform to your very own chat assistant just takes a few quick clicks! Read on to find out how: 

In this example, we’ll be using Typeform Chat to create an easy-to-use website navigation chatbot. Here’s how it’ll look on your site once you’ve set it up: 

sitenav1.png

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 direct visitors around your site. 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. In this example, we’ll create a typeform for an organization that offers educational summer camps for children of various ages. 

1. From your Workspace, create a new typeform by clicking New typeform.

sitenav2.png

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 Content tab of your Create panel to add a Welcome Screen.

subs1.png

Make your visitors feel at home with a friendly greeting! 

sitenav23png.png

HC_BobRoss_ilu_cropped.png
Tip: You can change the button text in the right-hand Question menu.
HC_BobRoss_ilu_cropped.png
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 in the right-hand sidebar to customize your typeform’s appearance according to your brand’s needs. You can use the Typeform Gallery to pick out a pre-designed theme, or create your own with a custom color palette. This space theme is a great fit for a fun-loving organization.

sitenav24.png

5. Time to add a Multiple Choice question. Here, you can learn more about what your visitor is looking for. We’ll create options for learning more about camp logistics, program offers, and the organization’s mission. We’ll also add a fourth option, for visitors who would like to learn about a topic we haven’t mentioned: 

sitenav25.png

HC_BobRoss_ilu_cropped.png
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. Awesome! Now it’s time to ask some follow-up questions. Later on, we’ll set up logic branching between the questions, so that your visitors only see the information they’ve asked for.

In this example, we’ll create one or two follow-up questions for each of the options in the Multiple Choice question we created earlier. 

For respondents who asked about camp logistics, like program dates and fees, we’ll add a Multiple Choice question asking what camper age group the visitor is interested in:

sitenav26.png

For respondents who said they were interested in program offers, we’ll add two follow-up questions. The first, a Multiple Choice question, will ask about the length of the program that the visitor is interested in (one week, two weeks, or a month). 

sitenav27.png

The second, a Picture Choice question, will ask about the subject area that interests the visitor (science or history). For the images, we’ll use Typeform’s icon gallery

sitenav28.png

For respondents who said they were interested in something else, we’ll add a Short Text question that asks for one or two keywords relating to the visitor’s question:

sitenav29.png

As for respondents who asked to learn about the organization’s mission, we’ll direct them to an Ending that links them to the organization’s About Us page. We’ll get to that in just a bit!

You can add as many additional questions as you like, as well as images or GIFs via the Layout options in the right-hand sidebar to break up the visual flow of your questions. Feel free to get creative! 

7. We’ll link the questions we’ve created to different logical paths soon, but before that, we’ll create various Endings that direct visitors to the correct page based on their answers. 

To add multiple Endings, click the + sign next to the Endings heading in your Content tab. 

sitenav30.png

We’ll need to create the following Endings:

Endings that lead to the logistics page for each age group of campers, for respondents interested in logistics. Here’s an example:

sitenav11.png

Endings that lead to the pages for each combination of program length and subject area, for respondents interested in program offers. Here’s an example: 

sitenav12.png

Endings that direct visitors interested in something else to a couple additional website pages, based on whether their answers fit anticipated keywords. For example, if a respondent enters “jobs” in the Text question, you might redirect them to your organization’s hiring page.

You should also create an Ending that directs visitors to a generic contact form, in case you can’t tell what they are asking for. Here’s an example:

sitenav13.png

HC_BobRoss_ilu_cropped.png
Tip: You can use Recall information to reference the respondent’s prior answers, like we’ve done here.

An Ending that links visitors interested in the organization’s mission to the site’s About Us page. Here’s what that might look like: 

sitenav14.png

Are you keeping track? That’s a lot of Endings! Setting them up should be a breeze, though, and the extra effort is worth the enhanced experience for visitors.

To make sure that each Ending links to the correct page, you'll need to adjust the settings in the right-hand Question menu. Disable the social share icons, change your button text, and add a link to redirect your respondents when they click the button. 

sitenav32.png

8. Time to link all of your questions and Endings together using Logic. 

math_lady_gif.gif

From the right-hand sidebar, open the Logic tab and click on Branching and calculations

simpleselectbranching.png

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 options in your first Multiple Choice question to the correct follow-up question or Ending, as shown below. 

sitenav16.png

Then, add rules for follow-up questions that direct different answers to the correct question or Ending. For example, question 3, about program length, should flow directly to question 4, about program subject area. On the other hand, the answers to question 4 should flow to Endings that combine the preferences regarding length and subject area.

Each combination of preferences - in this case, there’s a total of six - needs a separate logical rule for the flow to work correctly. Here’s an example of one of those six rules:

sitenav17.png

When it comes to question 5, which is a Short Text question that lets visitors type in a few keywords regarding their interests, you can direct respondents to the right Ending by using rules that work based on the content of the respondents’ answers. 

For example, answers containing the string “job” or “hiring” could flow to an Ending linking to your organization’s hiring page, and answers containing the string “enroll” could flow to an Ending linking to the camp enrollment page. All other answers should flow to an Ending with a link to a generic contact page. Here’s a visual of how one of these rules might look:

sitenav18.png

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.

faqnl1.png

Hit Save to finish up. When you’re happy with your typeform, go ahead and hit Publish in the top right of your screen. Try out this typeform below! 

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 discreet yet accessible popover option. Good things come in small packages!

sitenav20.png

HC_BobRoss_ilu_cropped.png
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 add personal touches, like a chat avatar showing your camp mascot, a popover button color that matches your chat design, or a greeting message.

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

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.

Here, you can also toggle Custom launch options to control when the chat 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. 

popupbehavior.png

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. 

mceclip0.png

Congratulations! Your site navigator chat assistant is up and running. Time to sit back, relax, and let your chatbot create some happy campers!  

 

 

Tap into our community knowledge

Find Answers
Contact Support