support.zendesk.com Open in urlscan Pro
104.18.249.37  Public Scan

URL: https://support.zendesk.com/hc/en-us/articles/4408881932698-Adding-the-Zendesk-Chat-widget-to-your-website
Submission: On October 23 via api from LU — Scanned from DE

Form analysis 1 forms found in the DOM

GET /hc/en-us/search

<form role="search" class="search" data-search="" data-instant="true" autocomplete="off" action="/hc/en-us/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓" autocomplete="off"><input type="search" name="query"
    id="query" placeholder="Search in Live chat" autocomplete="off" aria-label="Search"></form>

Text Content

Categories

Account
Settings and billing
People
User management
Channels
Conversations and communication
Objects and rules
Workflows
Apps and integrations
Extending Zendesk
Support and ticketing
Support
Help center
Guide
Reporting and analytics
Explore
Sales
Sell
Zendesk Suite
Dive in to learn more
Agents
Agent guide
Developers
API and reference
Community
English
languages
Deutsch Español Français Italiano 日本語 한국어 Português 简体中文
Current: English

Sign in
 1. Zendesk help
 2. Chat
 3. Using Chat for live chat
 4. Setting up Zendesk Chat


CHAT

Live chat

 1. Zendesk help
 2. Chat
 3. Using Chat for live chat
 4. Setting up Zendesk Chat


ADDING THE ZENDESK CHAT WIDGET TO YOUR WEBSITE

Aimee Spanier
 * Edited April 11, 2023

Zendesk Documentation Team

FollowNot yet followed by anyone

What's my plan?



Note: If you have both Zendesk Chat and Zendesk Support, this article doesn't
apply to you. Instead, you need to use the Web Widget to add Chat to your
website. Follow the instructions in Setting up Zendesk Chat in the Web Widget
(Classic) and Configuring components in the Web Widget (Classic).

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

 1. From the dashboard, select Settings > Widget, then click the Getting Started
    tab.
 2. Copy the embed script, as shown in the example below:
    
    

 3. 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.

 4. Save and publish the page.

The widget should be visible after reloading the page in a browser.


Yes -5 No 26
 * 
 * 
 * 

Return to top


26 COMMENTS

Sort by
Date Votes
 * Ivan Soldo
    * February 18, 2021
   
   
   
   Comment actions
   
   Hi, 
   
   On my ionic mobile, I don't want to show the floating chat widget (as it will
   conflict with other elements), but to place it as an item. Is there any way
   to do that?
   
   Thanks
   
   Yes 0 No
   
 * Ivan Miquiabas
    * March 16, 2021
   
   
   
   Comment actions
   
   Hi Ivan.
   
   Thanks for reaching out!
   
   May i have a look at your mobile view of the widget? can you send a
   screenshot? Also, you can rather overlay the widget on your mobile device
   following this article: Recipe: Identify and track what webpage a customer
   was on when they started a chat
   
   Ivan Miquiabas | Customer Advocate
   
   Yes -1 No
   
 * Scott Stawarz
    * April 6, 2021
   
   
   
   Comment actions
   
   HI Zendesk / Zopim Chat Team,
   
   We are working on improving our website speed.  Often the page speed tools
   suggest that the Zopim JavaScript can be compressed more.  Is the something
   we can download, compress and embed locally from our own domain?  Or do you
   have an updated version that is faster?
   
   Here's a screenshot example:
   
   
   
   Yes 0 No
   
 * Heather Rommel
    * April 6, 2021
   
   Community Moderator
   
   Comment actions
   
   Hi Scott Stawarz,
   
   I agree, Zendesk needs to redo the widget in a lighter fashion. It hits our
   Google rankings because it slows down the page.  Our workaround until Zendesk
   fixes this (Zendesk, why not fix it??) is to load an image that looks like
   chat, and when the customer clicks it, we redirect them to a deeper page in
   our website to load the actual chat.
   
   Terrible, right? But we didn't want our main page to get "dinged" by Google.
   
    
   
   Yes -1 No
   
 * Arec Johnson
    * April 10, 2021
   
   
   
   Comment actions
   
   Hi Ramin, 
   
   Thank you so much for helping. I was wondering about how I can hide widget
   from website, but thanks you shared API source
   https://api.zopim.com/files/meshim/widget/controllers/LiveChatAPI-js.html#hideAll
   
   It works for me. Thanks,
   
   Yes -1 No
   
 * Muhammad Rahil
    * April 20, 2021
   
   
   
   Comment actions
   
   is it possible to use it in 2021 for my current website Jazz daily Internet
   Package, I wanna add a chat box to my website please guide me a little bit..
   
   ----
   
   This post has been edited by the Zendesk Community Team, to remove links, in
   order to meet with our Community Guidelines.
   
   Yes -1 No
   
 * Dave Dyson
    * April 21, 2021
   
   
   
   Comment actions
   
   Hi Muhammad!
   
   Thanks for your interest! If you haven't already, first you'll want to
   register for a trial: Register
   
   Once you've done that, this article will take you step by step through the
   process of trying out chat and setting it up in your Zendesk help center:
   Evaluating live chat in your Zendesk Suite trial account
   
   Once you've done that, come back to this article and follow the directions
   above. You'll need to be able to edit the HTML on your Jazz Packages website
   in order to embed the chat widget there. 
   
   And if you run into any issues as you go, here's how to contact our support
   team: Contacting Zendesk Customer Support
   
   Hope that helps!
   
   Yes -1 No
   
 * aleenakhan
    * May 28, 2021
   
   
   
   Comment actions
   
   i am also looking for a chat option in tesco check bill website. Please guide
   me how is it possible?
   
    
   
   Yes -1 No
   
 * James Williams
    * October 5, 2021
   
   
   
   Comment actions
   
   Is there anyway to have this be an inline form on a specific page vs the
   floating widget?
   
   Yes 0 No
   
 * GS Admin
    * October 25, 2021
   
   
   
   Comment actions
   
   Hi 
   
   can we enable zendesk chat widget for our different products on different
   websites?
   
   i want to enable 2 different web widgets for 2 different product , will this
   be possible??
   
   Yes -1 No
   
 * Brett Bowser
    * October 25, 2021
   
   Zendesk Community Manager
   
   Comment actions
   Hey Gaurav,
    
   You should be able to add your widget to multiple websites and customize the
   appearance for each widget as well. I would recommend taking a look at the
   following article: Customizing the appearance of your widget
   
   Let me know if this isn't what you're looking for!
   
   
    
   
   Yes -1 No
   
 * Ryan McCarty
    * November 10, 2021
   
   
   
   Comment actions
   
   Can someone explain the first step to me? 
   I don't know what the dashboard is.
   
   
   
    1. From the dashboard, select Settings > Widget, then click the Getting
       Started tab.
   
   Yes -1 No
   
 * Pius Unimke
    * February 9, 2022
   
   
   
   Comment actions
   
   Is there a way I can disable caching?
   
   Yes -1 No
   
 * Yanuv David
    * February 25, 2022
    * Edited
   
   
   
   Comment actions
   
   Hi I added this code to my web site html body (end of body)
       <!-- Start of  Zendesk Widget script -->
       <script id="ze-snippet"
   src="https://static.zdassets.com/ekr/snippet.js?key=MyKey"> </script>
       <!-- End of  Zendesk Widget script -->
   the chat is not been displayed and i keep getting error
   
   Key is missing from snippet vendors~rollbar.noconflict.umd.min.js:1:58963
       n https://static.zdassets.com/ekr/vendors~rollbar.noconflict.umd.min.js:1
       oe http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       c http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       (Async: setTimeout handler)
       _immediateFn http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       c http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       l http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       s http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       d http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       re http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       (Async: promise callback)
       re http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       d http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       u http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       re http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       oe http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       <anonymous> http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       c http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       (Async: setTimeout handler)
       _immediateFn http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       c http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       l http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       f http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       c http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       (Async: setTimeout handler)
       _immediateFn http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       c http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       l http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       f http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       c http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       (Async: setTimeout handler)
       _immediateFn http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       c http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       then http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       <anonymous> http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       <anonymous> http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       o http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       <anonymous> http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
       <anonymous> http://static.zdassets.com/ekr/snippet.js?key=MyKey:1
   
   How Can I fix it? what did I do wrong?
   
   Yes -1 No
   
 * Ricky Wagner
    * March 6, 2022
   
   
   
   Comment actions
   Hi Gaurav
   
   Yes -1 No
   
 * Ricky Wagner
    * March 6, 2022
   
   
   
   Comment actions
   Did you still need assistance with this issue ? 
   
   Yes -1 No
   
 * Kipa Aduma
    * March 6, 2022
   
   
   
   Comment actions
   
   yes I do,.. please
    after I copy the script from the admin to clean regular  HTML file in my
   machine the chat works fine.
   but when I copy the same script to my web application in the same machine
   into an XHTML file I get this "Key is missing from snippet "  error
   
   Yes -1 No
   
 * Ricky Wagner
    * March 7, 2022
   
   
   
   Comment actions
   Hi Kipa,
   
   I'd advise to start a conversation with support in order for us to best
   assist. The steps to create a conversation are included in this Article.
   
   Yes -1 No
   
 * Felipe Passos
    * September 28, 2022
   
   
   
   Comment actions
   
   Is there a JS load/ready event for zendesk chat ? 
   
   Yes 0 No
   
 * Ramin Shokrizadeh
    * September 29, 2022
   
   Zendesk Product Manager
   
   Comment actions
   
   Felipe Passos You can use the following callback API for when Chat has a
   connected status:
   https://developer.zendesk.com/api-reference/widget/chat-api/#on-chatconnected
   
   Yes -1 No
   
 * Usman Nizam
    * October 11, 2022
   
   
   
   Comment actions
   
   Hi
   I have integrated this on one of the pages in my web-app. However one issue
   I'm facing right now is that when I start a chat with customer support and
   then go to a different page and come back the session is not maintained and
   the chat with customer support is deleted, I have to start a new chat all
   over again. Any leads to help fix this issue would be appreciated.
   Thanks :) 
   
   Yes -1 No
   
 * Georgina Hale
    * October 17, 2022
   
   
   
   Comment actions
   
   Hi, looking for some help please
   
   We are using messing on Zendesk suite on a professional plan. We are trying
   to set up the messaging chat widget (we aren’t using the classic chat widget)
   
   We use UserPilot for our onboarding. Part of this is a resource centre, in
   which we can install our live chat/messaging service through a js code. The
   HTML code provided from the chat installation page in the admin centre is not
   working. I have spoken with UserPilot, and they have advised we need a simple
   js code for the chat to be triggered manually. Does anyone know where can I
   get this or if there is a specific way this should be configured?
   
   Thanks in advance! 
   
   Yes -1 No
   
 * Barun Pattanaik
    * December 1, 2022
   
   
   
   Comment actions
   
   how can i integrate this in springboot java ?
   
    
   
   Yes -1 No
   
 * Bhavya Lamba
    * December 7, 2022
   
   
   
   Comment actions
   
   Hello team,
   
   I am working on Zendesk API link to get the data into the database,
   
   Zendesk API documentary
   - https://developer.zendesk.com/api-reference/ticketing/tickets/ticket_skips/
   
    However, below link is not working and I checked in postman as well(added
   screenshot for your reference). Can you please guide or provide the updated
   link.
   https://agodapeopleops.zendesk.com/api/v2/skips
   
   Looking forward to your response.
   
   Your prompt response is highly appreciated.
   
   Thanks
   Bhavya
   
   Yes -1 No
   
 * LeeAnn Pearl Ellis Dettmers
    * December 9, 2022
   
   
   
   Comment actions
   
   Now how can I get to tell what is this company for
   
   Yes -1 No
   
 * Christopher Kennedy
    * December 13, 2022
   
   Zendesk Developer Advocacy
   
   Comment actions
   Hi Barun,
    
   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?
   
   Yes -1 No
   

Please sign in to leave a comment.




RELATED ARTICLES

 * Using Web Widget (Classic) to embed customer service in your website
 * Configuring and deploying live chat
 * Adding live chat to your website or help center
 * Installing Zendesk Chat for Wix
 * Upgrade your Legacy Chat+Support account to the enhanced experience

Zendesk 989 Market St., San Francisco, CA 94103 Privacy Policy | Terms &
Conditions | Cookie Notice | Cookie settings | System Status
Powered by Zendesk
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
Permalink
We use cookies to provide visitors with the best possible experience on our
website. These include analytics, functionality, and targeting cookies, which
may also be used in our marketing efforts. Click the 'Accept All' button to
agree to the use of cookies or click 'Cookie Settings' to manage your
preferences. To opt out of non-essential cookies, click 'Reject All'.Cookie
Notice
Cookie settings Reject all Accept all



PRIVACY PREFERENCE CENTER

Zendesk uses web cookies to collect information about you when you visit our
Site. This information might be about you, your preferences, or your device. At
Zendesk, we may use this information for purposes that include ensuring basic
functionality of our Sites; remembering user preferences, including your cookie
preferences; measuring the effectiveness of our Sites, marketing campaigns, and
email communications; and personalizing online content.

Please review the different category headings below to learn more and adjust the
cookie settings on your current device. Please note that you will need to ensure
that each web browser is adjusted to reflect your preferences if you use
different computers or mobile devices.

For more information about how Zendesk uses web cookies, please see our Cookie
Notice.

Allow All


MANAGE CONSENT PREFERENCES

ESSENTIAL COOKIES

Always Active

Essential cookies enable core site functionality. These cookies are necessary
for the Site to function and cannot be switched off in our systems. You may set
your browser to block or alert you about these cookies, but parts of the website
may not function properly.

View Vendor Details‎

FUNCTIONAL COOKIES

Functional Cookies

Functional cookies enable the Site to provide enhanced functionality and
personalization. These cookies may be set by us or by third-party providers
whose services we have added to our Site.

View Vendor Details‎

ANALYTICS COOKIES

Analytics Cookies

Analytics cookies allow us to count visits and traffic sources so we can measure
and improve the performance of our Site. These cookies help us to know which
pages are the most and least popular and see how visitors move around the Site.

View Vendor Details‎

TARGETING COOKIES

Targeting Cookies

Targeting cookies, such as social media cookies, may be set through our Site by
our advertising service providers, third-party advertisers, ad networks, or data
exchange partners. These cookies may be used to show you relevant advertising on
other third-party sites.

View Vendor Details‎
Back Button


VENDORS LIST



Search Icon
Filter Icon

Clear
checkbox label label
Apply Cancel
Consent Leg.Interest
checkbox label label
checkbox label label
checkbox label label

Confirm My Choices