Adding a click-to-chat link
Publicado 16 de jul. de 2015
Open the chat window by clicking a button or link on the Help Center.
This can be achieved by adding a few lines of code in HTML and JS.
Steps:
- Attach following code to your image/link/button which would be clicked to launch chat widget, following attaches javascript to a html-link (which can wrap an image or icon -- button)
//to attach to a html link
<a href="javascript:$zopim.livechat.window.show();">
<img src="yourbutton.png" alt="Chat Button" />
</a> - Add following in your JavaScript code (General > Customize Design > JS). This code hides the chat widget, so it doesn't show up by default on page load.
$zopim(function() {
$zopim.livechat.hideAll();
});
Following Images show how you can put code on "Ask a Question" icon, and clicking on it would show Chat widget on the page:
It's quite simple, and that's all required to show chat widget on click of a button or link. The Zendesk Chat (JS) API provides more stuff which can be used to suite different requirements.
Please try, and share your feedback. If you face any issue, or need help, please feel free to leave a comment in this post, and we would try to help you asap.
Cheers!
Team Diziana
Visit Diziana to download free and premium custom responsive ready-to-use Zendesk theme or Zendesk template or Zendesk plugins for Zendesk Help Center. Brand your Zendesk Help Center, and provide fantastic self-service customer support experience.
0
18 comentários
Domains Director
Hello. Is this information up to date? We have a Zendesk Support plan and are activating the Chat feature with the agent's workspace enabled.
TIA, Loreto.
0
Cheeny Aban
I created a ticket on your behalf. Don't worry! one of our Support will reach out to you via email.
0
Hunza Khan
i embed the code but my chat popup is not open error(zopim live chat not define...
please help
0
Chad Susa (Gravity CX - Zendesk Partner)
I found this excellent tutorial. Hope it helps someone :)
Quickstart – Creating a launcher for the Web Widget (Classic)
0
Miguel Acero
Saludos, yo tenia el mismo problema y utilice la siguiente solución:
<script>
function Chat(){
var script = document.createElement("script"); //Make a script DOM node
script.id ="ze-snippet"
script.src = "https://static.zdassets.com/ekr/snippet.js?key=KEY";
document.head.appendChild(script);
}
</script>
<input id="clickMe" type="button" value="clickme" onclick="Chat();" />
0
Jessie Schutz
Hi Glenn!
I'm not sure I totally understand what you're asking here. When you say "image", do you mean the "click to chat" button? Or are you envisioning something else?
0
Glenn Michael Manuel
Hi Everyone,
I've tried the solution on top. It works fine but I have problem regarding on the flow.
Is this possible?
If I clicked the image it will hide and the form chat will come up.
Otherwise If I minimized the form chat, the image will come up.
Thansk,
Glenn
0
Nicole Saunders
Thanks for sharing a solution, John!
0
john gaspay
I've tried solution on the top but none works so I've tried using this solution that works on me.
If you are using button you can use this, this works on me.
1. <button onclick="zE.activate();">Chat Us</button>
2. or using text link <a href="javascript:zE.activate();">Chat us</a>
3. be sure to add this two script via footer before body tag closing.
4. <script>if(loggedIn) {zE(function() {zE.show();});}</script>
5. <!-- Start of Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR KEY"> </script>
<!-- End of Zendesk Widget script -->
6. Hope this helps
-1
Daniel Yousaf
Hi Mikeisrain!
I'd like to open a ticket for us, as we'll need account-specific info to properly address the issue. You'll receive an email from me shortly :)
Best,
0
Entrar para comentar.