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