Question 1

How to use $crisp JavaScript SDK?

Accepted Answer

$crisp lets you control Crisp from your JavaScript code. This lets you listen to Crisp events, as well as open, close the chatbox or do fancy stuff with the chatbox.

This section helps you use $crisp from your code.

|| The $crisp JavaScript SDK is included in the Crisp chatbox. You don't need to install or enable anything, as it is built-in. You can start using it straight with no specific configuration.

Available Namespaces

You can find the list of supported actions here.

Check a boolean value

Warning: the $crisp.is() method is not async-safe. Do not use it before Crisp is fully loaded (see 'Use $crisp Before It Is Ready').

[chat:opened]

Description: Returns true if the chatbox is opened, else false.
Code: $crisp.is("chat:opened")

[chat:closed]

Description: Returns true if the chatbox is closed, else false.
Code: $crisp.is("chat:closed")

[chat:visible]

Description: Returns true if the chatbox is visible, else false.
Code: $crisp.is("chat:visible")

[chat:hidden]

Description: Returns true if the chatbox is hidden, else false.
Code: $crisp.is("chat:hidden")

[chat:small]

Description: Returns true if the chatbox is small, else false.
Code: $crisp.is("chat:small")

[chat:large]

Description: Returns true if the chatbox is large, else false.
Code: $crisp.is("chat:large")

[session:ongoing]

*

Question 2

How to add the Crisp chatbox code to my website?

Accepted Answer

So, you just signed up to Crisp and you are ready to add the chatbox code to your website? Great! This page will help you add Crisp to your HTML seamlessly. No need to be a developer.

First, we need to check which system your website runs on. Does it run WordPress? Is it coded from scratch?

Video tutorial:

${youtube}Video tutorial on how to install Crisp

Most websites

Here is how to retrieve your website code:

Go to https://app.crisp.chat/settings/websites/
Then click integrations
Go to HTML
Copy the script tag

In the file serving the first portion of your HTML (<head />) section, copy and paste the code we provide you just before the <head /> tag.

If you can't find the <head /> tag, you can also copy the chatbox code before the end of the HTML body, eg: right before the <body /> tag.

WordPress websites

If your website is running WordPress, you have to follow this tutorial.

Squarespace / Strikingly websites

If your website is running Squarespace, you have to follow this tutorial.

If your website is running Strikingly, you have to follow [this tutorial](/en/article/how-to-add-crisp-on-strikingly-10

Question 3

How to open the chatbox on click on a custom button?

Accepted Answer

The Crisp chatbox can be opened and closed via your website JavaScript code. This allows you to create custom "Chat with us" buttons on your website, and trigger the Crisp chatbox to open when a visitor clicks on such buttons.

You can use the following JavaScript code to open the Crisp chatbox:

$crisp.push(['do', 'chat:open']);

You can call it directly when an user clicks on a button:

<button onclick="$crisp.push(['do', 'chat:open'])">Click Me!</button>

| Want to know more about the $crisp interface? Read: How to use $crisp Javascript SDK?

Question 4

How to use Triggers?

Accepted Answer

Triggers can be used to send automated events to the chatbox of your visitors & users. Triggers are activated upon events, and execute a given set of actions. You can configure as many Triggers as you wish for the same website on Crisp.

Triggers help you automate your marketing by triggering automated chatbox actions, based on events, on the screen of your visitors. You can, for instance, send automated messages based on what page your visitor is visiting.

Here is a full guide about live chat trigger example

This guide goes into explaining the general concepts of triggers, and how everything is linked together.

| Triggers are available from the Crisp Pro plan

Video tutorial:

${youtube}Video tutorial on how to use Triggers

Create your first trigger

Go to the triggers plugin

Go to app.crisp.chat
Then go to plugins (in the sidebar)
Search for "triggers"

New trigger

Click on the new trigger button.
Then name your trigger. You can for instance name it My First Trigger,
An identifier will be required. It can be useful in the future. You can name it my-first-trigger
Then scrolldown and toggle Show a message

Once it's done, click Add a localized message
Set a custom message. You can style it bt using [markdown](https://help.crisp.chat/en/ar

Question 5

How to use the Auto-Responder plugin?

Accepted Answer

The Auto-Responder plugin helps you respond with a custom response flow of messages and chat events to certain messages from the chatbox, from email, or from other integrations (eg. Messenger). You can create Intents that are fired upon certain conditions, and that contain the response flow.

This guide goes into explaining the general concepts of Auto-Responder and Intents.

| Auto-responder plugin is available from the Crisp Unlimited plan

Video tutorial:

${youtube}Video tutorial on Auto-Responder

What Auto-Responder do?

Autoresponder helps you gain time by answering automatically to certain kind of messages. Some may call this a bot system; we call it an Auto-Responder.

It can be used in such cases:

You are offline: you want your customers to get a placeholder response saying that you are offline.
Some questions occur very frequently: you have a well-writen, automated answer so that your operators don't have to answer it repeatedly.
Some kind of questions should be handled by specific operators (eg. Technical department): you want to @mention those specific operators so that they are notified of the pending chat that they should handle.
Some users ask for a specific operator to help them by calling their name in chat: you want to @mention the operator the user called for so that he/she is notified of the user willing to speak to him.

What is an In

Question 6

How to add the chatbot plugin to my website?

Accepted Answer

The chatbot plugin helps you to create your own chatbot. Draw complex response flows, with events (eg. user sent message), actions (eg. send response message) and conditions (eg. check segment). The Bot plugin is able to answer messages coming from any source, eg. chatbox, Messenger, etc.

This guide goes into explaining how the Bot plugin works, and how you can get the most out of it. Our chatbot plugin comes with a visual builder so you can build chatbot scenarios without any coding skills.

To access the chatbot plugin and install it, simply go to Plugins > Bot

| Bot Plugin is available from the Crisp Unlimited plan

|| See 5 chatbot examples by clicking on this link. You can even download scenarios to import them in your Crisp Bot dashboard.

Video tutorial

${youtube}Video tutorial

What can I do with the Bot plugin? (use cases)

The Bot plugin is capable of the following use cases (amongst non-listed others):

Simulate an human conversation, with fallbacks if the bot does not understand
Automate responses to common questions, with choice buttons to guide the user to more precise answers
Pre-qualify people when they land on your website (eg. is the visitor a developer, sales, CEO, etc.?)
Auto-assign & mention operators from your team, based on certain criteria (eg. user country, language, clicked choice button

Frequently Read Articles

Browse All Categories