With the Freshdesk help widget, you can embed solution articles and a contact form within your website or product. When your customers need help, they can open the widget to search through solution articles or to submit a ticket. You can watch this video to learn how to set up the help widget or read more about setting up the help widget here.

You can embed the help widget on your Shopify store and show solution articles and a contact form to your customers. Based on how you set up the widget in your Freshdesk account (Admin > Channels > Widgets), you can customize its appearance and set up channels (a ticket form or solution articles or both) for your customers.

The following steps will guide you through implementing the widget in your Shopify site. You'll need a Freshdesk account with the help widget and a Shopify account with the Custom JavaScript & jQuery app.

1. Setting up the widget in your Freshdesk account

  • Login to your Freshdesk account and go to Admin > Channels > Widgets.
    If you can't see widgets under support channels, please contact support.
  • You can set up channels (a ticket form or solution articles or both) that need to appear on the widget, and customize its appearance. To learn more about these options, you can read these solution articles.
  • Once you've set up the widget, you can go to the Embed code tab and copy the code. Here's a sample embed code:

2. Embedding the widget in your Shopify account

  • Log in to your Shopify account and go to Apps.

  • Click on the Visit the Shopify App Store button, search and install this app on your account: Custom JavaScript & jQuery
  • Once you've installed the app, click on the option that says Add new JS snippet

  • Enter a Snippet name (1) of your choice. The name is just for your reference, so you can name it whatever you want. Click the Activate checkbox next to As HTML (2).

  • Remember the embed code that you copied from the widget settings page? Paste it inside the Snippet code (3) field, scroll up a bit and click on Publish(4).
  • The app will ask you to confirm if you want to publish the code. Click Publish. You will see a confirmation message, and the page will reload. 
  • When you click publish, you can view the name of the snippet you had given. Here's an example screenshot of what you can expect to see:

  • You'll have to click on Expand  to edit or replace the widget code in the future. 
  • When your customers visit your website, they will now be able to see the Freshdesk help widget.