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 app.crisp.chat
- Navigate to Settings > Workspace Settings > Setup & Integrations
- Copy your Website ID
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=e93e073a-1f69-4cbc-8934-f9e1611e65bb
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)
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
};
- 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: 24/02/2025
Thank you!