Your team’s range of organic vegetarian meal kits offers the perfect solution for every customer - they just don’t know it yet! By adding Typeform Chat to your webpage, you can greet visitors and offer them personalized recommendations based on their preferences. And the best part? Converting a typeform to your very own personal shopper just takes a few quick clicks. Read on to find out how:
In this example, we’ll be using Typeform Chat to create custom product recommendations. Here’s how it’ll look on your webpage 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 give your customers recommendations for meal kits. 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 Content tab of your Create panel to add a Welcome Screen.
Make your visitors feel at home with a friendly greeting!
4. Use the Design tab to customize your typeform’s appearance according to your company’s needs. You can use the Typeform Gallery or create your own with a custom color palette and Unsplash image.
Here, we’ve gone with a simple yellow background from the Unsplash library - it’s a color scientifically proven to make people hungry!
Don’t forget to Save your theme once you’re happy with it.
5. Now, add a Picture Choice question by clicking the + sign at the top of the Content tab. It’s time to learn more about your visitors’ product preferences. Later on, we’ll link their answers to specific outcomes using the Score quiz feature.
For this first question, we’ll ask what type of food is the respondent’s favorite.
Since this is a Picture Choice question, you can provide eye candy by accompanying each option with an image of your own products. We’ll create options for salads, noodles, veggie burgers, and pizza.
Enable the Randomize option in the right-hand Question menu to show question answers in random order to respondents. This will create a better experience in the Score quiz we’ll create later on!
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.
Tip: Add Alt text in the Question menu to improve your form’s accessibility.
6. Great! Let’s add a Multiple Choice question without pictures this time. Ask respondents to pick up to two words that define the flavor profile they enjoy, out of the choices fresh, spicy, umami, and herbal.
To let respondents pick more than one option, we’ll enable multiple selection, with a range that asks for one or two selections, and toggle Randomize.
Tip: You can use the Description field to break up the text that your respondents will see. For example, you could title the question above “Which of these flavor profiles sound most appealing?” and include “Pick one or two” in the description (the instructions that appear on your question screen for multiple selection will not be shown in Chat). The two sentences will show up one after the other as individual messages in the embedded chat, mimicking a conversational flow.
7. Since the meal packs you offer have different complexity levels, add an Opinion Scale question asking respondents to rank their comfort in the kitchen on a scale of 1 to 5.
8. Add a final Yes/No question to ask whether respondents have a gluten intolerance:
9. Our questions are set up! Now it’s time to create various Endings that will give your new customers the perfect meal kit recommendation. Here, we’ll recommend one of four products:
- Carrot and chickpea salad with vinaigrette
- Rice noodle stir fry with veggies
- Pulled jackfruit sliders with citrus aioli
- Focaccia pizza
To create multiple Endings, click the + button by the Endings header in your Content tab.
Get creative with the Ending text, and don’t skimp on graphics: use the Layout options in the right-hand sidebar to add and reposition an image on the end screen.
Within the Question menu for each Ending, disable the social share icons, change your button text, and add a link to redirect your respondents when they click the button. Each link should lead to the order page of the recommended product.
10. Time for some quiz magic! To show respondents different Endings based on their preferences, we’ll use the Score quiz feature. From the Create panel, open the Logic tab, choose the Simple view and click on Score quiz.
In this dialog box, we’ll add score values to each of our question answers. Afterwards, we’ll edit the score ranges that will result in one outcome or another.
When assigning scores to different answers, it helps to think about which outcomes each answer is associated with. In our example:
- Carrot and chickpea salad is linked to respondents who want salads, a fresh flavor profile, and have a kitchen comfort level of 1 or 2. We’ll assign a score of 1 to each of those answers.
- Rice noodle stir fry with veggies is linked to respondents who want noodles, a spicy flavor profile, and have a kitchen comfort level of 3. We’ll assign a score of 10 to each of those answers.
- Pulled jackfruit sliders are linked to respondents who want veggie burgers, an umami flavor profile, and have a kitchen comfort level of 4. We’ll assign a score of 100 to each of those answers.
- Focaccia pizza is linked to respondents who want pizza, an herbal flavor profile, and have a kitchen comfort level of 5. We’ll assign a score of 1000 to each of those answers.
Here’s what the scores for an individual question will look like:
Finally, we’ll assign a score of 0 to a yes response to the gluten intolerance question, and a score of 5000 to a no response. This range might look large, but it’ll make sure that gluten-intolerant respondents don’t get a recommendation of a dish with gluten!
Click Save once finished.
11. Head back over to the question view by clicking on the Question tab. You’ll notice that score ranges have magically been recommended for each of your Endings:
Clicking on any of the score ranges brings up a menu letting you edit them. Get your calculators out: the test starts now!
...Just kidding. We’ve done the math, and you can use these score ranges:
- A total score of 1-19 results in an outcome of carrot and chickpea salad. (This is for gluten-intolerant respondents who mostly chose answers related to this dish.)
- A total score of 20-4999 results in an outcome of rice noodle stir fry. (This is for gluten-intolerant respondents who mostly chose answers unrelated to the salad option.)
- A total score of 5000-6999 results in an outcome of pulled jackfruit sliders. (This is for gluten-tolerant respondents who mostly chose answers unrelated to the focaccia option.)
- A total score of 7000 or more results in an outcome of focaccia pizza. (This is for gluten-tolerant respondents who mostly chose answers related to this dish.)
After entering these score ranges, hit Save. Once you’re happy with the look of your typeform, click the Publish button in the top right of your screen.
Try the typeform out yourself!
Setting up a chat embed
Now that you’ve created your typeform, there are only a few setup steps to turn it into a chat.
1. Head over to the Share panel and click the Start a chat button.
2. Within the panel that appears, 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!
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 with this option.
3. Click Design in the left-hand menu to add personal touches, like a chat avatar, 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:
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.
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.
Congrats! Your product recommendation chat assistant is up and running. Time to sit back and take a break - maybe in Kit Kat form? (This food talk is making me hungry!)