Create a website chatbot

Using a chatbot on a website, you can automate sales and customer support: collect contacts, answer questions, process requests.

In this article, we will look at how to add a bot to a widget on a website.

Script setup

Create a new script in your project, add the first Website Event block, and select the event type that triggers the bot:

Page Opening – immediately after the page opens

Page Scrolling – after the specified page scroll percentage

Click on Element – after clicking on an element

Hover on Object – after hovering over an object

Field Filling – after filling in a field on a website

Widget website setup

After adding the Website Event block to your website, the block settings window will open.

1. Paste the page URL where you want to place the widget. The URL is your website's address.

2. Copy the widget code, go to your website's admin panel, and open the block settings for the page where you want to insert the widget.

3. Add the widget code to the page's HTML before the closing </body> tag. The method for adding the widget code may vary depending on your hosting provider. For example, for Tilda-based websites, navigate to Block Library → Other → T123 block.

4. Select a message design for the widget.

For the Element Click, Object Hover, and Field Fill events, you must specify a CSS element selector in the block settings. CSS selectors are used to style HTML elements on a web page. The bot will monitor them to recognize events on the website.

How to find and add a CSS selector

1. Hover your mouse over a page or element and right-click View Source to open the developer console. The selected element will be highlighted in the console and on the page.

2. Right-click the selected element in the console and select Copy → Copy selector.

3. Insert the CSS selector into the block settings field.

Widget design setup

Widget Form

Add to Website – displays as a full-screen page.

Page Block – displays as a page block. The size can be customized.

Widget – displays as a pop-up window in the lower left corner.

Avatar

You can add an image or video.

Startup Script

Specify the script that will run in the widget.

Trigger Message Launch

Immediately – the bot is activated when a visitor goes to the website.

Event – the bot is activated when a user performs an action: clicking on an element, scrolling the page, filling in a field, or hovering over an object.

Trigger Message Sound

Select the appropriate one or select No Sound.

Next, the widget code is duplicated.

If you'd like to learn the basics of setting up chatbots for marketing, sign up for our mini-course "Nocode in Marketing: Tools for Increasing Conversion."