How to create your first chatbot with Collect.chat

Welcome to Collect.chat! Creating an engaging chatbot for your website is easier than you think. This guide will walk you through the three simple steps: Design, Questions, and Share – to get your first chatbot up and running.

Design

The first step is to customize the appearance and placement of your chatbot to match your website's style. Here, you can choose in which position the chatbot should appear.

Click 'on'

You can give your bot a face by selecting from our pre-set avatars or uploading your own custom image.

Click hereChoose a color scheme that matches your website. For a perfect match, you can even enter a custom hex color code.

Click hereTurning off the welcome message will only show the avatar. We recommend that you turn it on, so that the chatbot is more interactive and engaging.

Click 'on'Questions

This is where you build the actual conversation flow. Collect.chat uses different Question Types to ask questions and collect information.

First, let's add a Multi Choice Type. This question type is great for offering the user predefined options, such as Yes/No questions.

Click 'Save'To ask the name of our user, let's add a Text Question. This question type is used to get an open-ended text answer from users.

Click 'Save'Next, let's ask the email address of our user with an Email Type. Collect.chat gives you the option to personalize your questions using variables. Variables can use the answer from any of your previous questions. To add one, type the @ symbol and choose one of your questions.

Click 'Save'To end the conversation, we will use the Thank You Type, which includes a friendly GIF and a concluding message "Nice chatting with you." You can also add a call-to-action button here.Click 'Edit QuestionCancelSaveNice chatting with youRedirect buttonAdd a redirect button to the thank you page.Button label​Redirect URL​Answers to be included in the URLAdd answerOpen in new tabURL...'

Preview the Chatbot

Click on the Preview icon at the top right side and see your chatbot in action.

Click 'Preview'You can see the variable in action here. The answer from our second question is applied on the third questions's text.

Share

To add the chatbot to your website, go to the Share section. Under Website, you'll find a code snippet. Simply copy this snippet and paste it into your website's HTML code.

Click hereIf your website runs on Wordpress, we have a dedicated WordPress plugin. We have documented all the steps you'll need to take here: How to add chatbot to WordPress

Click 'Website Builders'If your website is powered by a website builder such as Shopify or Squarespace, follow the instructions on the Website Builders tab.

Click 'Email Instructions'If your website is run by a third-party team, simply email them all the instructions using the email template on the Email Instructions tab.



Still need help?

Contact us

Getting Started