Communication with the chatbot from outside using the Crisp chatbot or JavaScript

Why to integrate?

The Crisp chatbot is a pretty powerful tool and may add logic to the chatbox's behavior. For example, it may answer simple questions, show buttons depending on the user's message, and so on. You can read more about its functionality in the official documentation (opens in a new tab).

On the other hand, it has huge restrictions as it's not an AI-based chatbot. But by combining its functionality with the Enum chatbot, you may have more control over the chatbox and create pretty complicated workflows.

Example of integration

Problem definition

Let's review such a case (based on the real requirements): a company has 2 groups of users that can be divided by their proficiency: new users usually ask simple questions that the Enum chatbot can answer easily whereas experienced users that are on an advanced plan may ask questions that a human agent could only answer.

The first scenario would look in this way:

Here is how the second scenario should look in the chatbox:

Possible Solution

We want our new users to be served by a chatbot whereas the advanced users could choose who/what they would prefer to talk to - the AI assistant or a human agent. To distinguish between them, we use conversation tags, or segments (more on Crisp's segments read in this article (opens in a new tab)). To specify this scenario for these two groups, we would create the following workflow:

As you can see, the workflow starts with getting the user's message. We then determine the segment of the user and define the corresponding actions. Let's review creating this workflow step-by-step.

1. Defining segments

   There are multiple ways to define the segments (manually, via API, or other workflows and plugins). For the sake of simplicity, let's define them in the Crisp dashboard. Open your conversation, then find on the right side the section called "Segments for conversation" and add the "new" or "advanced" segment for your users:

2. Install the Crisp chatbot

This plugin is available for the "Unlimited" plan, you also can start with a free trial. To install the plugin, open your dashboard, click the Plugins on the left menu and select the Automation section, click the Bot plugin, and then click the install button.

3. Create the first scenario

Click the New scenario button at the top of the plugin menu and you will see the following canvas with one entry point (gate):

4. Add a new event Firstly, we need to determine the segment our user belongs to. The very first event that happens when a user starts interaction is the message event. To add it, click on the plus of the entry point block, or the plus on the left side of the canvas, select the New User Message event and drag it to the canvas (while dragging the link to the first block is created automatically):

5. Add the first condition

The very first condition we want to add will determine if the user just started the conversation (as we want to check it only once, at the beginning of the conversation). To add this block, click on the Plus again if you close it, then select the Condition block, and then click the Conversation type. Drag the Conversation is new? block onto the canvas:

6. Condition for our new clients

We want our new clients to be served by chatbot immediately but first, we need to determine their segment. Add another condition block but this time the type is "Contact" and the block is "Contact Segments?":

Then click on the block and you will see a menu over it, click the Edit button:

Leave the condition as is ("Contains any") and in the value input print "new":

8. Send the signal to Enum

We want our "new" users to be served by the Enum chatbot. To make it happen, we have to send the corresponding signal to the Enum. By default, the Enum chatbot starts working as soon as user sends the first message, and in the next section, we will show you how to change this behavior. Now, let's add the action block, then select the Update User type and block Update Custom Data

In the left menu, enter the following data: key "enum" and value "start_chatbot", then press Enter to save changes.

9. Add an information message

Immediately after you send the signal to the Enum chatbot, it will start working. You may add here the message that will inform the enum that the AI assistant started. Drag a new action block, select the "Send Message" type, then the "Send message" block. In the menu on the left, enter the corresponding message:

10. Add the condition for advanced users

Drag another condition block to the canvas, and select the Conversation segments block. In its properties enter the "advanced" value and press Enter to save changes. Then click to the beginning of the block and drag the connection to the "Conversation is new?" block:

11. Add the Buttons action

From the left menu, drag a new Action (Send Message, Add a button picker?) block and connect it to the previous condition block:

In the block's properties, enter the accompanying message, then click the Add a button and enter the button's text.

12. Add the button event block

Now, we need to know whether the user clicks the chatbot button. Let's add the event (the Button/Input Action type) and connect it to the buttons' block:

In the block's properties, select the Button Click as the message action, and AI Support Assistant in the Match dropdown. Selecting so, we are saying "We are moving to the next block if user clicked the AI Assistant Button".

13. Activate the chatbot

Drag from the left menu an Action block, add the action block, then select the Update User type and block Update Custom Data and enter the following data: key "enum" and value "start_chatbot", then press Enter to save changes - exactly the same what we did in step 8:

14. Add the information message

Add the Action block, type Send message to the end of this fork and type some information message:

15. Save and deploy your chatbot

On the top menu of the chatbot editor, click the Save button

then the Deploy:

16. Add the start settings in the Enum In the Enum dashboard, open your chatbot page, move to the Custom behaviour & Automation tab, then to the Control the chatbot via Crisp bot, or from JavaScript section. Select the second option Wait for signal from Crisp chatbot or the user to start and click the Save button. Doing so, we say to the Enum chatbot "Do not start answering questions until you have a signal" and the signal will be updating "user data" which we did in the steps 8 and

That's it!

17. Test the chatbots integration

You can test the workflow you've just created, right in the Enum dashboard. Move to the Live test tab of your chatbot's properties, then click the Show Crisp chatbox button and the Crisp button will be shown on the right pane. Then try to simulate the user's behavior to see the result.

Using buttons to control the Enum chatbot

In some cases, you'd like to pause or start the Enum chatbot when a user clicks a specific button. Let's change this scenario a little bit to demonstrate this approach.

1. Remove the unnecessary blocks First, remove the custom data block following the buttons block:

To do that, you click on the block, then click the trash button and confirm the deletion:

2. Add the button ID

Now, click the edit button for the button block, then click the blue gear button for the Chatbot button, and then click the Show identifier customization.

Enter "enum:start_chatbot" in the field and press the Enter button:

3. Repick the button in the next conditional block

As we changed the button's ID we have to repick the button - just click the block, and in the editor on the left, re-select the button:

4. Reconnect all blocks

Make sure all the blocks in this fork are reconnected properly:

The result is the same as in the previous example.

List of commands that can be sent to Enum chatbot

Values for buttons

You can assign buttons specific values that will be sent as soon as the user clicks on them. This approach can be used instead of setting User Custom Data:

Recognized values:

• enum:start_chatbot
• enum:pause_chatbot

Values for User Custom Data:

• key: enum, value: start_chatbot
• key: enum, value: pause_chatbot

List of commands that the Enum chatbot can send to the Crisp

In some cases, we want to notify the Crisp chatbot about changes done on our side. At the moment, we send one signal when our chatbot is paused due the user's request for human assistance:

• key: enum, value: chatbot_paused:human

In the future, if we send a signal when the chatbot is paused due to another reason, your workflow can be recognized easily the reason as it's provided in the value, after the semicolon.

Sending signals via JavaScript

If you don't have access to the Crisp chatbot, it's still possible to pause and start your Enum chatbot - it can be done via JavaScript. On your website, you can set up some logic (for example, via clicking the corresponding buttons, or with pure JavaScript) and the signal will be sent to the Enum chatbot exactly in the same way as it's done via the Crisp chatbot. For example, here the code to start/pause the Enum chatbot by clicking the buttons:

    <script type="text/javascript">
        window.$crisp=[];
        window.CRISP_WEBSITE_ID="YOUR_WEBSITE_ID";
        (function(){d=document;s=d.createElement("script");
        s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();
    
        function run_pause_chatbot(value){
            $crisp.push(["set", "session:data", ["enum", value]]); // Or explicitly $crisp.push(["set", "session:data", ["enum", 'start_chatbot']]); 
        }
    </script>

    <button onclick="run_pause_chatbot('start_chatbot')">start</button>
    <button onclick="run_pause_chatbot('pause_chatbot')">pause</button>

The documentation on working with the Crisp sessions can be found here (opens in a new tab).

One important note Due to the Crisp API which is it doesn't allow to set up the same values in a row, alway set up first a dummy value separated with a short timeout like this one:

$crisp.push(["set", "session:data", ["enum", Math.random().toString()]]); // Random dummy value
setTimeout(()=>$crisp.push(["set", "session:data", ["enum", value]]), 1000); // Actualy value sent in one second.