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 () section, copy and paste the code we provide you just before the tag.

If you can't find the tag, you can also copy the chatbox code before the end of the HTML body, eg: right before the 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:

| 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 can I automatically set user emails?

Accepted Answer

If you are using Crisp on a website where users are authenticated, you may want to set their email so that they don't have to specify it when they start a chat with you.

This method uses the Crisp JavaScript API, that you can call from your own code. Given that you know the authenticated user's email from your code, you'll be able to set it for the Crisp chatbox.

Here's how you would proceed to set the visitor's email:

// Feed this call with your own internal email data.
$crisp.push(["set", "user:email", "user@gmail.com"]);

Let's say you are using PHP, then use.

(assuming $user_email is your user email.)

Here's how you would proceed to get the visitor's email:

var visitor_email = $crisp.get("user:email");

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

Frequently Read Articles

Browse All Categories