1. Help
  2. Advanced
  3. Do more with Typeform
  4. Create subscription forms using Chat

Create subscription forms using Chat

Your team has worked hard preparing a brand-new online newsletter, and you’re excited to launch soon! You’re just starting out, and are keen to find ways to grow your reader base as quickly as possible. The answer: a friendly chat assistant that helps any visitor to your site subscribe to your newsletter, combining the efficiency of a typeform with the convenience of round-the-clock help. 

In this example, we’ll build an easy-to-make, easy-to-use subscription chatbot with Typeform Chat. Here’s how this bot looks in action:

subscription1.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 set up subscriptions. 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.

subscription2.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 left-hand sidebar of your Create panel to add a Welcome Screen

subs1.png

Use friendly and inviting language to grab your visitors’ attention!

subs2.png

 

HC_BobRoss_ilu_cropped.png
Tip: Change the button text in the right-hand Question menu.

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, as shown below, or create your own using a custom color palette and an Unsplash background:

subs3.png

5. Now, add a Short Text question to greet your visitor by name. You’re all part of the same community, so why not get to know each other? 

subs4.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. Follow up with an Email question. While writing your question, hit the @ key to use Recall information to call your new reader by the name they just gave you.

subs5.png

7. Cool! Now, let’s say that your newsletter lets readers only receive updates about the topics that interest them most. A Multiple Choice question with multiple selection enabled is a great way to let readers customize their experience: 

subs6.png

HC_BobRoss_ilu_cropped.png
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 “What should we include in your newsletter?” and include “Choose as many as you like!” 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.

8. Depending on applicable data privacy laws, you’ll need to make sure that your readers consent to receiving email communications. Use a handy Legal question to obtain consent, and make sure to mark the question as Required:

subs7.png

9. Finally, you can mention options for readers to upgrade and become paying subscribers. Add another Multiple Choice question, this time without multiple selection, to let subscribers opt in to a paid tier:

subs8.png

10. Now we’re talking! All that’s left to do is create Endings that close the loop with your new subscribers. Here, we’ll create two different Endings: one that paying subscribers will see, and one that non-paying subscribers will see. 

For each Ending, we’ll change the floating menu settings to disable the social share icons and change the button text. In the Ending for paying subscribers, we’ll add a button link to redirect respondents to our newsletter’s payment page, and instruct respondents to click the button once they’re ready to pay.

subs9.png

HC_Warning_ilu_cropped.png
Warning! Payment is currently unavailable in Chat.

11. Time for the final touches! From the Create panel, open the Logic tab in the right-hand sidebar and click on Branching and calculations

Find the question block that corresponds to your last question, which asks form respondents if they’re interested in a paying subscription. Within this question block, add two logical rules that direct each of the options in the question to a different Ending, as shown below: 

subscription13.png

This step makes sure that your new subscribers only receive a link to a payment page if they’ve chosen to subscribe to a payment tier. Hit Save to finish up. When you’re happy with your typeform, go ahead and hit Publish. Try the form out below!

Setting up a chat embed

Now that you’ve created your typeform, there are s 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. 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 Standard option here. 

subscription14.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 with this option.

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: 

subscription15.png

HC_BobRoss_ilu_cropped.png
Tip: Increasing transparency means that your chat background will become less visible against the background of your site. Increasing transparency to 100% fully blends in your chat with the rest of 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:

typingspeed.png

5. Now, all that’s left to do is click Get the code to grab the embed code you can use on your webpage.

subscrption16.png

Congratulations! Your subscription chat assistant is up and running. Now all that’s left to do is run the presses! 

newspapers.gif

HC_BobRoss_ilu_cropped.png
Tip: You can integrate this typeform with Mailchimp, HubSpot, and many other tools to easily enroll new signups in different email flows.

Tap into our community knowledge

Find Answers
Contact Support