Quickstart – Creating a launcher for the Web Widget | The place for Zendesk users to come together and share
Skip to main content

12 replies

Wesley19
March 26, 2021

@Darren Chan thank you, this helped a lot however am noticing some unintended behaviour. 

We've followed these instructions and got our Custom launcher working as expected but we have one issue where proactive notifications or agents initiating chats on their end aren't allowing the widget to open itself. 

If we don't use the custom launcher, the widget will automatically open on the user's screen without requiring the user to open the widget manually. However with our custom launcher, built exactly as above, the user has to manually open the widget to see any notifications or proactive messages. Are we missing something?

Tetiana11
March 26, 2021

Thank you so much for this article! We had a hard time customizing the launcher and failed, but this really helped!

Bryan32Employee
Employee
March 26, 2021

Hi Wesley. I'll let Darren offer input as well, but this is definitely a tutorial — specific needs may vary. This is just to demonstrate some of the basic features that are available.

That said, you can add code that considers different events. For example, this code is triggered when a chat message comes in:

zE('webWidget:on', 'chat:unreadMessages', (number) => {
  console.log(`You have ${number} unread messages`);
})

You could use the above and then call:

zE('webWidget:on', 'open', function() {
  console.log('The widget has been opened!')
})

Your needs may of course be different. The above are just ideas. Hope they help!

Danish12
March 26, 2021

Just wanted to share if we want to a Custom Button to as a toggle button we can just do it by attaching onClose and onOpen to zE and just use the toggle command from the button.

Global Script

window.zE('webWidget', 'hide');
window.zE('webWidget:on', 'close', function () {
  window.zE('webWidget', 'hide');
});
window.zE('webWidget:on', 'open', function () {
  window.zE('webWidget', 'show');
});

 

Button OnClick

window.zE('webWidget', 'toggle');
Maria17
Maria17
November 23, 2021

Hi!

can someone tell me how can I make coexist chat and form contact in the same web widget at the same time and allow the customer choose what to do? (or chat or contact form)

Maybe with two different custom launchers? or a link and custom launcher? Any advice will be welcome!

Thanks.

Maria

Aaron67
Aaron67
October 3, 2022

Hello, 

Are these docs outdated? None of the customizations are working for me after following the examples.

Thanks,

Aaron

Erica
EricaEmployee
Employee
October 3, 2022
Hi Aaron,
 
The quickstart guide is up to date and the corresponding customizations should be working. Just to confirm, is this the documentation you're using?
 
Best,
 
Erica
Alessia12
Alessia12
December 11, 2023

Hello,

I'm following this tutorial but I'm getting always this error: zE is not defined

Codepen:

 

Where is the trick please? I also tried to start a loop until the object is defined but it doesn't work.

this is the error I'm getting from a real console:

Method webWidget.hide does not exist.

A note from Zendesk: API methods associated with the Web Widget (Classic) are still being executed on this page. This website is now using the new Web SDK (messaging experience) which no longer supports these APIs. If you don't intend to use the Web Widget (Classic), we recommend that you remove this code from your website.  Whilst not recommended, leaving them won't cause any issues. 

So maybe the page needs an update? Thanks

ADMIN42
ADMIN42
December 11, 2023

Hi @alessia12

You have to define myLauncher object.

Sostitute:

<div id='myLauncher' onclick='openWidget()'>Click to chat with me!</div>

With:

<button onclick="zE.activate();">Contact us</button>

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello, World!</title>
  </head>

<body>
  <p>Hello, World!</p>
 <!-- Start of mywidget Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=xxxxxxxxxxxxx"> </script>
<!-- End of mywidget Zendesk Widget script -->
<button onclick="zE.activate();">Contact us</button>
<script type="text/javascript">
zE('webWidget', 'hide');
</script>
  </body>
</html>

And tell me what you see.

Maria

Alessia12
Alessia12
December 12, 2023

Hi @admin42,

thanks for your answer. My bad, I didn't specify that the issue is not on the click but on the page load. I want to hide the chat icon and show it only after the click of my custom button.

So when I load the page I'm getting the console error reported above ( "Method webWidget.hide does not exist. etc") and the chat icon is showing.

Show more replies
Terms & ConditionsAccessibility statement