How to install SnapCall on Zendesk Guide?

Providing a call button directly in your knowledge base can be highly valuable for your customers. The ones who were not able to find an answer in the Help Center could get in touch with your team with just one click.

  • By installing the SnapCall button directly on your knowledge base, your team will be provided with the customer data of the logged-in users.
  • If the customer is not logged-in they won't be provided with the SnapCall button.

Sounds good? Let's see how to install the SnapCall button on your Zendesk Guide.

 

1. Go to your Zendesk workspace and open the Zendesk Products (the four-squares icon on the top right corner of the page). Click on Guide.

Screen_Shot_2020-06-09_at_13.14.37.png

 

2. Click on Guide admin on the top right corner.

Screen_Shot_2020-06-09_at_13.14.47.png

 

3. Click on Customize design (👁️ icon) on the left menu to see you Zendesk Guide themes.

Screen_Shot_2020-06-09_at_13.15.30.png

 

4. Now click Customize on the theme you are currently using in your Zendesk Guide.

Screen_Shot_2020-06-09_at_13.15.46.png

 

5. When the theme is opened, click on Edit code.Screen_Shot_2020-06-09_at_13.49.31.png

 

6. Scroll down to the bottom of the code elements listed and click on script.js.

Screen_Shot_2020-06-15_at_14.09.08.png

 

7. Scroll down to the bottom of the code in the script.js section and insert the SnapCall code (provided below) there.

Screen_Shot_2020-06-15_at_14.13.02.png

 

The SnapCall code:

if (document.readyState === 'complete') {
if (HelpCenter && HelpCenter.user.role != "anonymous") {
var s=document.createElement("script");s.setAttribute("class","snapcall");
s.setAttribute("data-uid","xxxx");
s.src="https://snap.snapcall.io/snapapp.min.js";
document.body.appendChild(s);
window.snapcallExtraContext = function(callback){
callback({
identifier: HelpCenter.user.identifier,
fn: HelpCenter.user.name,
e: HelpCenter.user.email,
language: HelpCenter.user.local,
avatar: HelpCenter.user.avatar_url,
role: HelpCenter.user.role
});
};
}
};

 

8. You'll now need to change xxxx in line 5 with the unique ID number that can be found in your SnapCall account. Let's get it. Go to your SnapCall account and click on the button you want to be installed inside your Zendesk Guide. Click Copy in the JAVASCRIPT section.

Screen_Shot_2020-06-15_at_14.51.41.png

👉 Here's how to create a call button connected to your Zendesk account in case you need some help. 

 

9. Now paste the code line somewhere and find the unique ID digits. Copy them and paste instead of the xxxx in the SnapCall code inside the Zendesk Guide theme (see step 7)

Screen_Shot_2020-06-15_at_15.02.24.png

Make sure to click Publish to save the SnapCall code.

 

 

10. Now let's make sure a call button is displayed exactly where you want. Click on the button you want to see on your Zendesk Guide. Now click Edit in the GENERAL INFORMATION section.

Screen_Shot_2020-06-15_at_15.14.43.png

 

11. Set up button visibility filters for the button to be shown exactly where you want.

  • If you want this button to be displayed on every page of your knowledge base, choose starts with and enter the URL that appears in all the pages (in our case, it's https://support.snapcall.io/hc)
  • If you want this button to be displayed on some particular pages only, choose is equal to and enter the exact URL of the page where you want to see the button.

You can add as many particular pages as you want by clicking on +Add a filter.

Screen_Shot_2020-06-15_at_15.16.58.png

 

Don't forget to click Save and you're done! 💪

 

How do I start with SnapCall?

SnapCall provides you an opportunity to try our technology entirely free for 14 days. Create an account and start your free trial. In case you need any assistance, reach out to our team via support@snapcall.io.