This is a continuing discussion about the article Quickstart – Creating a launcher for the Web Widget in the developer documentation.
Quickstart – Creating a launcher for the Web Widget
@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?
Thank you so much for this article! We had a hard time customizing the launcher and failed, but this really helped!
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!
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');
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
Hello,
Are these docs outdated? None of the customizations are working for me after following the examples.
Thanks,
Aaron
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
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
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.
Hello? I asked for help on 12nd december, this issue is still pending.
Hi Alessia! In the screenshot that you provided, you removed all of the HTML, which is what is causing the issue. In the quickstart, you'll see that the code snippet contains HTML that your code does not. Just follow the instructions for the quickstart exactly as stated and you should be fine!
Login to the community
No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
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