Want a bit more control over the embeddable widgets? Or want to place them within a single-page application? You can use the JavaScript API to programatically listen to events and trigger actions in the embeddable widgets.
How To Subscribe To Events In The Embeddable Widgets
Once the embeddable widgets has successfully loaded on your website, the embeddable widgets expose a subscription method.
By default the embed code creates an inSided object in the window.
Once the widget is loaded an event gets emitted in the window.window.addEventListener('insided:conversational:loaded', function () { // embeddable widgets is loaded, now window.inSided.conversational is available });
Once the widget is loaded you can subscribe to available events calling:inSided.conversational.subscribe(event:string, callback(event:string, data:object));
For example:inSided.conversational.subscribe('insided:conversational:clicked', function (e, data) { console.log('embeddable widget topic has been clicked', e, data); });
You can also unsubscribe from embeddable widgets events (if you unsubscribe from an event it applies to all callbacks that were subscribed):inSided.conversational.unsubscribe('insided:conversational:clicked');
Below we've listed the events that you can subscribe to in the embeddable widgets.
| Event Name | Description |
|---|---|
| insided:conversational:clicked | the user clicked on a topic (conversational or in-page). It provides the clicked url as param. |
| insided:conversational-widget:closed | the user closed the conversational widget by clicking on the close button. |
| insided:conversational:loaded | the embeddable widgets have loaded in the window (note: this does not mean they have been displayed - see below). |
| insided:conversational-widget:opened | the user clicked on the trigger to display the embeddable widgets. |
| insided:conversational-widget:back-clicked | the user pressed 'back' after viewing a topic in the conversational widget. |
| insided:conversational:destroy | the embeddable widgets have been programmatically destroyed (by calling: inSided.conversational.destroy();). |
| insided:conversational:restart | the embeddable widgets have been removed from the DOM and initial behaviour has been restarted. |
| insided:conversational:search-loaded | the initial list of topics for the current page has been loaded (also emitted after running inSided.conversational.reload();). |
| insided:conversational:start | the embeddable widgets have been displayed. |
| insided:conversational:topic-rated | the user gave feedback on a topic. |
| insided:conversational-widget:view-topic-on-community-clicked | the user clicked a link to view a topic on the community. |
How To Trigger Actions In The Embeddable Widgets
The following methods are available in the embeddable widgets JavaScript API:
- inSided.conversational.create() - create the widget.
- inSided.conversational.destroy() - destroy the widget.
- inSided.conversational.reload() - reload the content in the widget (e.g. in case the user changed the view on a single-page application).
- inSided.conversational.subscribe() - subscribe to an event.
- inSided.conversational.unsubscribe() - unsubscribe from an event.
It’s also possible to trigger the widget to open using the following JavaScript: inSided.conversational.$store.dispatch('SLIDER_OPEN', {})