Start chatbot on a button click

You can link any playbook with a button on your website so that when a user clicks on a button on your website, the particular playbook is launched.

See Demo

For this, you will have to update certain code in your website, so that a Javascript code runs on a button click. Below are the steps for the same.

Login: Login to the admin panel and go to AI builder from the left menu. (To access AI builder, you must have the Owner role. You can check your role from the Team menu on the left sidebar)

Get Playbook Id: Select any of the web playbooks you would like to run on a button click. Hover to playbook name on the left sidebar, click on 3 dots to open Menu, and click on "Copy Id". Copy the playbook Id and note it down somewhere, it will be needed in the following steps.

Update code on your website: Below is the code you need to run to start the playbook. It will trigger the playbook, the message will be shown to the user as a popup next to the chat icon. Users can click on that to open the chat widget.

iticks.call('playbook', '<playbook id>');

Below is the code which will trigger the playbook and open the chat widget as well.

iticks.call('playbook', '<playbook id>');
iticks.call('show', 'maximize');

In the above code, you need to replace the <playbook id> with the id copied in the 2nd step.

Different ways to place the code on your website.

Once you have picked the code and replaced the playbook id, below are some of the ways you can use it to run the code on button click. You can have your own way of handling click events to run the code.

1. HTML markup onclick

<button onclick="iticks.call('playbook', '<playbook id>');iticks.call('show', 'maximize');">click me</button>

OR

<div onclick="iticks.call('playbook', '<playbook id>');iticks.call('show', 'maximize');">click me</div>

2. Using jQuery to add click event on the button(Assuming id of the button is demo, but you can use any other selector as well)

$('#demo').click(function() {
    iticks.call('playbook', '<playbook id>');
    iticks.call('show', 'maximize');
});