The Freshdesk Help Widget is a little icon that lives on your websites and support portal. You can customize your help widget to display solution articles and ticket forms, providing complete customer support.


This is article 1 of 3 about the Freshdesk Help Widget:
  1. Set up your help widget
  2. Advanced configurations with the help widget API
  3. Support multiple languages in your help widget


This article contains:


Capabilities of the help widget:

  • Embed solution articles and a contact form in your website or product
  • Use the API to control when the widget appears, prepopulate the form, disable specific ticket fields, automatically open the widget based on user behavior, and more
  • (Growth plan onwards) Customize the appearance to suit your brand
  • (Pro plan onwards) Customize to show contextual solution articles based on the page of your website
  • (Pro plan onwards) Track frustrated customers and provide proactive help

Create a help widget

To create your first widget:

  1. As an admin, go to Admin > Channels > Widgets and click Create a new widget.
  2. In the dialog, give the widget a name, add it to one of your support portals, and click Create.
    Dialog for creating a new help widget, as described in the surrounding text.
  3. Your widget is created and you're taken to the widget settings, which contains the following tabs:
    1. General—customize the widget text, and the forms and articles displayed in the widget.
    2. Appearance (Growth plan onwards)—customize the colors, patterns, and position of the widget and its button.
    3. Frustration tracking (Pro plan onwards)—set up Freshmarketer's frustration tracking to offer automatic help through your widget.
    4. Embed code—get the widget code to embed into your website or product.


On each tab, you'll see a live preview of the settings you configure. For example, the following preview has a custom appearance and banner text, a view of solution articles and the option to search for more, and a contact form.


Customize your help widget

You'll manage the bulk of the content of your help widget in the General tab. This tab contains:

  1. The banner message and launcher button text
  2. Settings to show a contact form
  3. Settings to show solution articles

Configure the contact form in your help widget

When you enable the Contact form toggle, you are shown a number of settings:

  1. Simple contact form or form with ticket fields
    • If you select Simple contact form, the contact form only contains 4 fields - name, email address, subject, and description.
    • If you select Show form with ticket fields, you can choose any of the ticket forms you've set up.
    • If you add multiple forms to the widget, the user will be shown only 1 dropdown at first, asking them to select the form. Ensure your form names are descriptive, and use the Dropdown placeholder to choose form field to provide direction to the user.
  2. Text fields for the form—regardless of the form you select, you can customize the following text:
    1. Title of the form
    2. Form submit button
    3. Form confirmation message
  3. Toggles
    1. Allow customers to attach files—up to 5 files with a maximum total size of 25 MB.
    2. Enable captcha to prevent spam
    3. Allow customers to attach a screenshot—a Take screenshot button appears in the form to capture the user's screen and attach it to the form.
  4. User validation—show your widget only to logged in users. You can authenticate customers using the Authenticate API.

Display solution articles in your help widget

If you have created solution articles in your Knowledge Base, you can display them in your Help Widget to provide self-service anywhere on your website.


When you enable the Solution articles toggle, you'll see a field where you can choose which categories of articles to display. By default, the widget will display the most viewed articles from these categories, but your customers will be able to search for others.


If any of your articles are restricted to certain customer segments, you will need to authenticate your customers using the Authenticate API.


If you're on the Pro plan or above, you can provide contextual support by showing specific articles on specific webpages. To set this up:

  1. As an admin, go to Admin > Channels > Widgets and select your widget to see its settings.
  2. In the General tab, enable the toggle for Solution articles.
  3. Choose the categories to display in the widget.
  4. Click Add URLand in the dialog that appears, configure your contextual articles.
    1. Enter your URL or a portion of it. For example, if your pricing page is acme.com/pricing, you can add 'pricing' in the first field.
    2. Search for and choose up to 5 solution articles that are relevant to your URL.
    3. Click Add.
      Dialog to choose specific articles for a particular URL or keyword.
  5. Repeat step 4 and its substeps for each context you want to set up.


Finally, if you've enabled both the Contact Form and Solution Articles, you can choose 1 of 2 approaches.


NeutralOptimize for deflection

The neutral approach displays the search bar and solution articles at the top, followed by a button for the contact form.
The deflection approach hides the contact form. Customers must first search for their query and read a solution article. If they mark the article as 'Not helpful', the contact form is displayed.


The Appearance tab in your help widget

On paid plans, you can customize the aesthetics of your help widget to match your brand.


The Appearance tab has the following settings:
  1. Banner color scheme
    1. Choose either an available gradient or a solid color for the top of the widget.
    2. If you choose solid color, you can specify the color and choose either black or white for the banner text.
    3. You can also choose one of the available patterns to add flair to the banner.
  2. Widget position
    1. Choose whether the widget should show in the bottom-left corner or the bottom-right corner of your website.
    2. Adjust the distance from the corner in the offset fields.
  3. Button color
    1. Choose a color for the launcher button and the button to submit the form in the widget.
    2. Choose either black or white for the button text.
  4. Remove branding: Remove the ⚡️ by Freshworks text from the widget by going to Admin > Account > Helpdesk Settings and toggling off Freshdesk branding. You must be on a paid plan to do this.

The Frustration tracking tab in your help widget

Rage clicks are a series of clicks made during a short time span. Rage clicks are the typical user behavior when a button or a link isn't working properly. If you have a Freshmarketer account, you can set up Frustration tracking to track rage clicks and proactively open your help widget with a custom message and a support form.


To enable frustration tracking:

  1. Go to Admin > Channels > Widgets, open your widget, and go to the Frustration tracking tab.
  2. Provide your Freshmarketer account email or sign up for a new one and click Enable frustration tracking.
    Enable frustration tracking in your help widget
  3. Specify up to three URLs (domains) where you want to track customer frustration.
  4. Set the header message, description, and form submit message.
    Settings for frustration tracking as described in the surrounding text.


When you enable frustration tracking, Session Replay is also enabled. When a frustrated user submits the support form in the help widget, you receive their message as a ticket and can see their journey via Session Replay to better understand what led to their rage click.

After you configure your help widget, you can deploy it by using the Embed Code tab.

Embed and use your help widget

The Embed Code tab shows you the script to load your widget on a website. Copy the code here and place it in your website's code.

The Embed code tab displays the widget code to add to your website.


If you change your widget's settings after embedding, the widget will automatically and instantly reflect the new changes. You do not need to re-embed it.

Embed your widget on your Freshdesk support portal

To embed your help widget on your support portal:

  1. In Freshdesk, go to Admin > Channels > Widgets, select your widget, and go to the Embed code tab.
  2. Copy the code displayed.
  3. Go to Admin > Channels > Portals, hover over your portal, and click Edit.
  4. Click the Appearance tab and click Edit theme for your current theme.
  5. Click the Pages tab and in the Layout section, click Footer.
  6. Before the closing footer tag, place your widget code, and click Publish. Confirm the publish in the dialog that appears.

Your widget will be visible to customers when they visit your support portal.

Embed your widget on a Shopify website

To embed your help widget on a Shopify website:

  1. In Freshdesk, go to Admin > Channels > Widgets, select your widget, and go to the Embed code tab.
  2. Copy the code displayed.
  3. Login to your Shopify account and go to Themes.
  4. Click Customize to access the theme editor.
  5. On the theme editor page, click the triple dot menu in the top-left corner and select Edit code.
  6. On the theme code editor page, use the search box to find </> footer.liquid and select it.
  7. On the right side of the page, scroll to the bottom of the code, paste your widget code, and click Save.

Your widget will be visible to customers when they visit your website.

Embed your widget on a WordPress website

To embed your help widget on a WordPress website:

  1. In Freshdesk, go to Admin > Channels > Widgets, select your widget, and go to the Embed code tab.
  2. Copy the code displayed.
  3. Login to your WordPress account, go to Plugins, and click Add New.
  4. Search for the Freshdesk (Official) plugin and click Install Now.
    • If you see an error while installing the plugin, please check if you have given write access to WordPress.
  5. After installing the plugin, go to Plugins > Installed Plugins and click Activate under Freshdesk Official.
    • After activation, Freshdesk is visible in your toolbar.
  6. Click the Freshdesk menu to see the following options:
    1. Show help widget on this WordPress site. Enable this, paste your widget code below, and click Save changes.
    2. Convert WordPress comments to Freshdesk tickets. Learn more.
    3. SSO integration. Learn more.

After you paste your widget code and click Save changes, your widget will be visible to customers when they visit your website.

Embed your widget on a Wix website

To embed your help widget on a Shopify website:

  1. In Freshdesk, go to Admin > Channels > Widgets, select your widget, and go to the Embed code tab.
  2. Copy the code displayed.
  3. Login to your Wix account and go to Settings > Advanced Settings > Tracking & Analytics.
  4. Click +New Tool | </> Custom, or click </> Custom on the splash screen.
  5. In the dialog that appears, provide the following:
    1. Paste your widget embed code.
    2. Provide an internal name.
    3. Choose between loading the widget on All pages or specific pages. If you want it for all pages, we recommend picking Load code once from the dropdown.
    4. Select Body - end.
    5. Review your settings and click Apply.

Your widget will be visible to customers when they visit your website.

For additional help, contact [email protected].