Okay so I am editing a page here support.tophat and at the bottom left of the screen there is a little widget button that opens up a handy little support ticket window upon click. This is the ZenDesk widget that is provided by zendesk to provide a service for customers to submit support tickets to the ZenDesk back end.

What I'm trying to do is to include an "onClick" call to a function on some arbitrary link or button elsewhere on the page that will trigger the support ticket window to display, without actually having to click on the button in the bottom left.

It would seem that this is through an iframe, and I have already tried the jQuery .click() function to no avail... After inspecting the element, and seeing what function gets fired when a user clicks on the button, I get a long string of disgustingly cryptic JS that has no real outlined functions.

My end goal is to open the support window after clicking on, lets say, a link that has a trigger like if I click on a link, and set the onClick="trigger()" which fires the window to open in the bottom left.

If you would like me to include the block that chrome shows be when the event is fired let me know, but it is NOT pretty and mods might not like if i put in code that looks like that.

Okay so I am editing a page here support.tophat. and at the bottom left of the screen there is a little widget button that opens up a handy little support ticket window upon click. This is the ZenDesk widget that is provided by zendesk to provide a service for customers to submit support tickets to the ZenDesk back end.

What I'm trying to do is to include an "onClick" call to a function on some arbitrary link or button elsewhere on the page that will trigger the support ticket window to display, without actually having to click on the button in the bottom left.

It would seem that this is through an iframe, and I have already tried the jQuery .click() function to no avail... After inspecting the element, and seeing what function gets fired when a user clicks on the button, I get a long string of disgustingly cryptic JS that has no real outlined functions.

My end goal is to open the support window after clicking on, lets say, a link that has a trigger like if I click on a link, and set the onClick="trigger()" which fires the window to open in the bottom left.

If you would like me to include the block that chrome shows be when the event is fired let me know, but it is NOT pretty and mods might not like if i put in code that looks like that.

• javascript
• html
• zendesk

4 Answers 4

Using jQuery (which is included in the Zendesk Help Center), you can do this:

$('#launcher').contents().find('.Button--launcher').click();

I tested it out on your site in the Chrome console, and it activates the widget.

I found info relating to this answer here: IFrame button click event

Info on jQuery's .contents(): https://api.jquery./contents/

THIS:

  $zopim(function() {
    $zopim.livechat.window.show();
  });

If you wanna call it from HTML:

<a href="javascript:$zopim.livechat.window.show();">

You can also check their API docs: https://api.zopim./files/meshim/widget/controllers/liveChatAPI/Window-js.html

zE.activate(); Worked for me when used jQuery

Here is how you do it:

 <!-- Start of Zendesk Widget script -->    
<script id="ze-snippet" src="https://static.zdassets./ekr/snippet.js?key=YOUR_SNIPPET_KEY">    
</script>    
<!-- End of Zendesk Widget script -->

<script type="text/javascript">
zE('webWidget', 'hide');
function openWidget() {  
    zE('webWidget', 'show');  
    zE('webWidget', 'open'); 
};

zE('webWidget:on', 'close', function() { zE('webWidget', 'hide');})
</script>

And then in your HTML :

<a href onclick='openWidget()'>Click here!</a>

Here is a full tutorial on how to do this on ZenDesk's website: https://developer.zendesk./documentation/classic-web-widget-sdks/web-widget/quickstart-tutorials/creating-a-launcher-for-the-web-widget/