| Suite | Team, Growth, Professional, Enterprise, or Enterprise Plus |
| Support with | Live chat and messaging Team, Professional, or Enterprise |
Before your visitors can start chatting with you, you’ll need to add the Chat widget to your site by embedding the Chat widget script in the HTML source code of one or more pages.
To add the Chat widget to a web page
- From the dashboard, select Settings > Widget, then click the Getting Started tab.
- Copy the embed script, as shown in the example
below:
- In the source code of the web page, paste the embed script between the page's head
tags.
You can paste it either right after the opening <head> tag or right before the closing </head>.
If you are concerned about page load performance, we recommend placing the snippet at the end of the <body> rather than the <head>. Even though the snippet script is very lightweight, it’s best to avoid inserting scripts that will block the browser from continuing to render a web page until that script has loaded. Just keep in mind that any scripts that use the Web Widget zE JavaScript API must be placed after the snippet script.
- Save and publish the page.
The widget should be visible after reloading the page in a browser.
35 comments
Gamers00
To add the Zendesk Chat widget to your website, copy the embed script from the Settings > Widget section in your Zendesk dashboard. Paste it into your webpage’s HTML, either in the
<head>or at the end of the<body>for better performance. After saving and publishing the page, the widget will appear once reloaded in the browser.0
Gamers00
To add the Zendesk Chat widget to your website, follow these steps:
1. **Access Zendesk Chat Settings**: Log into your Zendesk account, go to **Channels > Chat**, and customize the widget’s appearance and settings to fit your brand.
2. **Obtain the Code Snippet**: Zendesk provides a unique JavaScript code that you'll need to integrate into your website. The code will look like this:
```html
<!-- Begin Zendesk Chat Widget -->
<script type="text/javascript">
window.$zopim || (function(d,s,id){
var z = $zopim = function(c) { z._.push(c) };
z._ = [];
var e = d.createElement(s);
e.async = true;
e.id = id;
e.src = 'https://v2.zopim.com/?YOUR_ACCOUNT_KEY';
var t = d.getElementsByTagName(s)[0];
t.parentNode.insertBefore(e, t);
})(document,'script','zopim');
</script>
<!-- End Zendesk Chat Widget -->
```
3. **Insert the Code into Your Website**: Copy the code and paste it before the `</body>` tag in your website's HTML.
4. **Publish and Test**: After inserting the code, refresh your site to see the chat widget live. This enables real-time communication with website visitors, enhancing customer support.
Make sure to replace `YOUR_ACCOUNT_KEY` with your unique Zendesk Chat account key.
0
Thomsonsteve
To add the Zendesk Chat widget to your OpenCart site, access the File Manager and navigate to
Catalog > View > Theme > Template >Common. Locate thefooter.phpfile and click on Edit to begin integrating the chat widget into your site.0
Lokesh Kumar
when I am checking my webpage on google page speed, I am getting the Error which is also effecting the page load speed.
Attaching the screenshot for your reference. Please provide the solution.
0
Destiny
I appreciate you getting in touch.
It seems you're looking to integrate the Zendesk web widget into your Angular application. Unfortunately, we do not have proprietary documentation on this subject; however, I have managed to locate some external references. Please be mindful that these resources haven't been vetted by us, hence we cannot provide support or address potential challenges that might arise from following those external guides. Your understanding is deeply appreciated.
Zendesk Web Widget Installation
Angular Key is missing from Snippet Zendesk
0
Sam Lotti
Hi, I'm trying to add the script in angular,
https://static.zdassets.com/ekr/snippet.js?key=..mykey..,
But get the error: Key is missing from snippet
The key is valid and works in a plain html page. Is there any documentation for adding the widget to an angular app?
0
Robert Girvin
Hello! Does anyone have an idea of how to set this feature up in SquareSpace?
Thank you,
Robert
0
Greg Katechis
Hi David! I think you may be confusing a couple of our products. This article is describing the chat widget, whereas it looks like you're using the newer Zendesk widget, which allows for messaging. If you're looking for our documentation for the Zendesk widget, we have the API docs here and dev docs here.
In fairness to you, we've had quite a few products over the years with very similar functionality, that are not easily differentiated from one another. Hope this cleared things up a bit, but drop us a line if you run into any issues.
0
David Borge
Why mention that you have to execute the following function for the chat to show up, right?
1
Christopher Kennedy
You can include that snippet in whichever UI template or view where you'd like to include the widget in your Spring Boot web app. Is there a specific complication you've encountered?
-1
Sign in to leave a comment.