DocumentationAPI Reference

Adding the messaging Web Widget to CTA buttons

The messaging Web Widget can be managed by CTA (Call-to-Action) buttons. It can be achieved by combining hide, show and open APIs together with the custom launcher.

To control the messaging Web Widget exclusively through the CTA button, follow these steps:

  • Select the custom launcher option in the Admin Center
  • Hide the widget upon page load
  • Utilize the show and open API when the CTA button is clicked

Note : Selecting the custom launcher option removes the launcher completely from your website. For more information on how to change launcher settings, see Configuring the name and appearance of the Web Widget.

To try this out for yourself:

  1. In your web browser, go to https://jsfiddle.net/.

  2. Copy and paste the following HTML code into the HTML editor located in the upper left UI panel of JSFiddle.

    <html lang="en">  <head> </head>
  <body>    <button id="messenger-button">     Chat With Us   </button>
   <script>     document.getElementById('messenger-button').onclick = function () {       zE("messenger", "show");       zE("messenger", "open");     }   </script>  </body></html>

  3. In Admin Center, click Channels in the sidebar, then select Messaging and social > Messaging.

  4. Click on your Web Widget channel name with the custom launcher setting enabled, then navigate to the Installation tab.

  5. Click the Copy icon at the bottom of the code snippet frame.

  6. In JSFiddle, paste the code snippet before the first button tag in the HTML panel. Your HTML should look as follows:

    <html lang="en">  <head> </head>
  <body>    <!-- Start of z3nabcd Zendesk Widget script -->    <script      id="ze-snippet"      src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_SNIPPET_KEY"    ></script>    <!-- End of z3nabcd Zendesk Widget script -->       <button id="messenger-button">     Chat With Us   </button>      <script>     document.getElementById('messenger-button').onclick = function () {       zE("messenger", "show");       zE("messenger", "open");     }   </script>  </body></html>

  7. Define the messaging Web Widget state upon page load. In this example, hide the Web Widget by entering the following line into the JavaScript panel located in the lower left corner of JSFiddle.

    // on page load always hide the widgetzE("messenger", "hide")

  8. Click Run.

Disclaimer: Zendesk provides this article for instructional purposes only. Zendesk can't provide support for third-party technologies such as JavaScript. Please post any issues in the Zendesk SDKs community, or search for a solution online.