Articles on: Install Crisp

How can I embed the Crisp chatbox in an external link or an iFrame?

By default, the Crisp chatbox is embedded on your website as a widget that can be opened and closed. However, if you would like to share a link that pops up a Crisp chatbox in full screen that users cannot close, this article may help you.

Crisp provides a simple way to build links that open up the Widget in full-screen. That way, you can easily create custom links that open the chatbox in a new browser tab; or share this direct link in emails. It's also useful if you want to include Crisp using an Iframe.

Here's how to proceed:

Go to: https://app.crisp.chat/
Go to your website settings: click on the cog icon on the bottom-left corner, then click on "Websites" and select your website in the list
Grab the Website ID code by clicking on "Get chatbox code" (we'll call it WEBSITE_ID there, a valid Website ID looks like: e30a04ee-f81c-4935-b8d8-5fa55831b1c0)
Alternatively, your website ID can be found in the Crisp App URL [https://app.crisp.chat/website/WEBISTE_ID]/inbox/

Your URL will take the following form (replace with your WEBSITE_ID):

[https://go.crisp.chat/chat/embed/?website_id=WEBSITE_ID](https://go.crisp.chat/chat/embed/?website_id=WEBSITE_ID)

Example (replace with your WEBSITE_ID):

[https://go.crisp.chat/chat/embed/?website_id=e93e073a-1f69-4cbc-8934-f9e1611e65bb](https://go.crisp.chat/chat/embed/?website_id=e93e073a-1f69-4cbc-8934-f9e1611e65bb)

Looking to find your Website ID? You can check this quick guide in order to retrieve it easily

Pass User Data

You can pass optional user data to the embed URL (user email and nickname). This will be saved once the chat is ready:

User email: use the user_email parameter (eg: &user_email=john.doe%40crisp.chat)
User phone: use the user_phone parameter (eg: &user_phone=%2B33240031187‬)
User nickname: use the user_nickname parameter (eg: &user_nickname=John%20Doe)
User avatar: use the user_avatar parameter (eg: &user_avatar=https%3A%2F%2Fimage.enrich.email%2Fperson%2Favatar%2F7d47b5be7e31885719e6587eb49fd50403045c80.jpg)
Session ID: use the crisp_sid parameter (eg: &crisp_sid=CRISP_SESSION_ID)
Session token: use the token_id parameter (eg. &token_id=TOKEN_ID - see tokens docs )
Session merge: use the session_merge parameter (eg. &session_merge=true - see tokens docs )

Notice: make sure to URL encode values before you pass them to the embed URL.

Force Chat Locale

You can force the chat locale and disable the locale auto-detect feature:

Locale: use the locale parameter (eg: &locale=en, &locale=fr, &locale=de any other locale code)

If you pass in an invalid or unsupported locale, the chatbox will fallback to English ( en).

Access the JS SDK

If you want to access the JS SDK, while embedding the Crisp chatbox in an external link, there is a trick for that. This trick also fixes cross-domain cookies issues (e.g. on Safari).

Create a blank HTML page , and embed the Crisp chatbox inside it (via this method )
Configure the chatbox via the special variable CRISP_RUNTIME_CONFIG:

window.CRISP_RUNTIME_CONFIG = {
	lock_maximized       : true,
	lock_full_view       : true,
	cross_origin_cookies : true
};

Ensure the RUNTIME configuration is included before the Crisp widget.

Host your HTML page on the same domain as your website / app. The link pointing to this page will behave exactly as a regular `https://go.crisp.chat/chat/embed/` link

Updated on: 30/09/2024

Was this article helpful?

Thank you!