Shopping cart

close
No products in the basket.

Filter

close
Choose Your Language: Spanish | English

Launch your 1st chatbot for Web

This article outlines the steps you need to make in order to launch a website chatbot.

Create an account #

Go to the account generator page and create a Promptchat account

You can log in to your account as soon as your email address is verified.

Create your first Calendar #

If you want to use the chatbot to book appointments for you, you will need to create a Calendar first. So best practise is that before you start building your chatbot you prepare a calendar, which the chatbot can use to book appointments in. You may want to create multiple calendars let’s say one for Call Back Requests and another for Appointment Bookings etc… (Skip this step if you don’t plan on using your chatbot for booking calendar events.)

Scroll down to see the bookings generated by the chatbot

Double click on the bookings to reveal contact information for the user who booked the event

Once you have created a Calendar it becomes available as a landing page calendar too so you can share its link via email and social media. To set this up you will need to create a Web integration for your Calendar.

Create a Chatbox Configuration #

You account came with a default chatbox configuration template called Promptchat. (This is essentially what you get on https://promptchat.com when you chat with us. Go to the Chatbox Configs Template tab and use the Create from template option. You can change the colours, font type and font size as well as build your own menu with your own hyperlinks.

Chatbox config template
Load the Promptchat Chatbox Configs Template and Edit it to make it your own

When you are finished save it as your template and then go to the Chatbox Configs Tab and use the Load from Template option. Now you have your own chatbox configuration file for your Web bot which you can save aa for example Homepage chatbox.

Use the chatbox editor to customize all aspects of your chatbox configuration

  • The website bubble or upload a custom image visitors click to open the chatbox
  • You can use your own “chatbot dude”
  • All colours of the chatbox header, body and footer
  • Font type and font size
  • Build the menu with your own hyperlinks
  • Save it as a template when you are done so you don’t need to start from zero next time you are building a chatbox configuration

Build your Chatbot #

For the purpose of this tutorial, we will not go into details of each function of the chatbot editor. You can find lots of resources here with detailed explanations on what the chatbot blocks are for and what they do. The most often used blocks in the chatbot editor will be the Message, Buttons, Questions, Notifications and Tags. There are templates included with your account. Go to the Templates Tab and pick one. Use the drag & drop visual editor to customize the text and the conversation flow of your chatbot. Save your work when you are done. Here is a simple conversation flow for an ecommerce website.

<div id="chatbot-example"></div>

Create an Integration for Web #

Go to the Integrations Tab and click Add Integration.

Add Integration

Pick the Web Service and continue

Select Web and continue

Pick the chatbot you are building the chatbox and continue…

Fill in all the fields and continue

Next, pick the chatbox configuration you want your chatbot in

Pick your chatbox configuration

Continue and you are all done.

SUCCESS

Retrieve the installation JavaScript for your website #

In order for the chatbox to appear on your website you have to install (paste) a JavaScript code in the footer file of your website. You will find this JavaScript in the Preview tab of your Integration. Go back to the Integrations Tab and click the drop down menu to find the Preview menu item.

Preview your Web chatbot

Preview your chatbot prior to installation and if you are happy with everything click the Copy Code button and share it with your Webmaster who will have to insert this in your website footer’s HTML file just before the closing body tag (so it will be the last script to load for your website visitors)

Preview and copy JavaScript

Feel free to drop us a message if you need help with any of this #