Generate leads using Chat

Your team may be based in Boston, Barcelona, or Bangalore, but your audience is located worldwide. By adding Typeform Chat to your webpage, you can capture leads around the clock and give site visitors a positive, personalized experience. And the best part? 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 make lead generation easy. 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:

• Welcome screen
• Design options
• Multiple Choice questions
• Text questions
• Date questions
• Endings
• Logic branching
• Embed as chat

Creating your typeform

The first step for using Typeform Chat is creating the typeform you’ll use to capture leads. 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 the 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 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 blue is relaxing, don’t you think? 

5. Time to add a Multiple Choice question. Here, you can learn more about what your visitor is looking for:

6. Once your visitor has let you know what they’re interested in, you’ll want to know a little bit about them, too. Add a Short Text question asking their name:

7. Then, add an Email question to collect their contact information. While writing your question, hit the @ key to use Recall information to call your new contact by the name they just gave you. It’s the little things that matter!

8. Now that you have your lead’s contact information, it’s time to ask some follow-up questions. Although you may want to ask all of your leads the same set of questions, with Advanced Logic, it’s also easy to show your new contacts different questions based on their previous choices. 

In this example, we’ll create one follow-up question for each of the options in the Multiple Choice question we created earlier. These options were booking a consultation, getting a quote, and learning more about the company’s services.

For respondents who said they wanted to book a consultation, we’ll create a Multiple Choice question asking what they’d like a consultation on. Some clients may want to discuss more than one topic, so we’ll enable multiple selection on this question:

For respondents who said they were interested in getting a quote, we’ll add a Date question that asks about project deadlines. Time is money! 

Finally, we’ll show respondents who mentioned learning more about the company’s services a Long Text question that lets them add more detail about what they’d like to know: 

You can add as many additional questions as you like - whether it’s Statement questions giving your lead more information about your company, or a Number question asking about your lead’s project budget. Don’t be afraid to get creative! 

9. We’ll link these three questions to different logical paths in just a second, but before that, we’ll create an Ending that closes the loop with our new leads by scheduling a call with them.

In the right-hand Question tab, disable the social share icons, change your button text, and add a link to redirect your respondents when they click the button. Here, we’ve put in a link to the scheduling tool Calendly. 

10. Time to put it all together! From the Create panel, open the Logic tab and click on Branching and calculations.

Find the question block that corresponds to question 3, your Email question. Within this question block, add three rules that direct each of the options in your first Multiple Choice question to a different follow-up question, as shown below. 

Setting up this logic after the Email question (question 3) instead of after the Multiple Choice question (question 1) ensures that all of your leads will see the same questions 2 and 3, no matter how they answered question 1: 

Afterwards, direct each of those three follow-up questions to the same Ending, so that your leads only see the questions that are relevant to them: 

Hit Save to finish up. Your final Logic Map will look something like the image below.

When you’re happy with your typeform, go ahead and hit Publish.

Try out the 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 discreet yet accessible popover 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 lead gen chat assistant is up and running. Time to sit back, put your feet up, and listen to the sweet, sweet sound of leads pouring in.