All Categories Quick Guides How to open the widget in modal mode

How to open the widget in modal mode

with an authenticated customer

By Stefan
February 27, 2023

To integrate the widget in your application, you can trigger it from an individual icon or link. Usually, it will look nicer if you open the widget in modal mode. To do so, you need to initiate the widget without data-auto-init .

<script  id="helpspace-widget-script"  
   data-token="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
   data-client-id="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"  
   data-widget-id="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"  
   src="https://cdn.helpspace.com/widget/widget-v1.js"   
   async>
</script>

Decide if you want to use async or defer.

If you want to automatically identify your customer.

<script>
   window.addEventListener("load", function() {
         HelpWidget('user', {
         name: 'Peter Fox',
         email: 'example@example.com',
         id: 123, // optional
         show: false // hide name and email fields on contact form
      });
   });
</script>

To open the widget as a modal, you can simply use:

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

Close it again with:

HelpWidget('close');

You can also use link data attributes. See full documentation:
https://documentation.helpspace.com/api-widget-javascript#Link-Data-Attributes

Or open the widget in a custom size. See full documentation:
https://documentation.helpspace.com/api-widget-javascript#Sizing-Options

Was this article helpful?

Thanks for your feedback!