All Categories Quick Guides Open the Widget with a Link

Open the Widget with a Link

By Eva
January 14, 2022

The HelpSpace widget opens when the user clicks on it. Now there are situations where it should open via link. This article describes how to configure it.

First, you create a widget and embed it in your Docs-Site or Website. How to do that you can find here:

Docs-Site

In a Docs article, you open the widget with javascript in the link:

  1. Write a text, mark it, and click on the link icon

  2. Enter "javascript:" and the Widget API function. Example:
    javascript:HelpWidget('open');

  3. Remove the checkmark from "Open a new Window"

Link-Open-Widget.png


Examples:

Link

Desciption and Demo-Link

javascript:HelpWidget('open');

Open Widget

javascript:HelpWidget('close');

Close Widget

javascript:HelpWidget('open', { article: 257 } );

Open Widget and Article with the id 257

javascript:HelpWidget('open', { contact: true } );

Open Wiget and go to contact

javascript:HelpWidget('open', { docs: true } );

Open Wiget and go to docs

javascript:HelpWidget('open', { modal: true } );

Open Wiget in a modal panel

Check all Widget API Functions on the Widget Javascript API documentation.

Website

You can add the same function to your website, but here you add data link attributes.

Examples:

Link

Desciption

<a href="#" data-widget-open>Open widget</a>

Open Widget

<a href="#" data-widget-close>Close widget</a>

Close Widget

<a href="#" data-widget-open data-widget-article="257">Open article with ID 257</a>

Open Widget and Article with the id 257

<a href="#" data-widget-open data-widget-contact>Open contact</a>

Open Wiget and go to contact

<a href="#" data-widget-open data-widget-docs>Open docs</a>

Open Wiget and go to docs

Check all Link Data Attributes on the Widget Javascript API documentation.

Was this article helpful?

Thanks for your feedback!