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 little box that can be opened and closed. However, if you would like to be able 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 chatbox 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
Example (replace with your WEBSITE_ID):
https://go.crisp.chat/chat/embed/?website_id=-JzqEmX56venQuQw4YV8
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.
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).
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:
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
Crisp provides a simple way to build links that open up the chatbox 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
Example (replace with your WEBSITE_ID):
https://go.crisp.chat/chat/embed/?website_id=-JzqEmX56venQuQw4YV8
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: 13/06/2022
Thank you!