How To Install The Conversational Widget On Your Website


Install our conversational widget on your website to provide community-driven help to your customers, right where they need it. The conversational widget floats above the page, and can be activated by clicking a trigger. It’s quick and easy to install - you just need to enter basic information about your website in Control, then add your unique embed code to your webpages. Follow the steps below to install and activate the conversational widget.
 

1c223b17-7cbd-43ac-bc5f-433d4df4d95e.png

 

How To Install The Conversational Widget On Your Website

 

  1. Go to Control Integrations  EMBEDDABLE WIDGET Installation.
  2. Press Copy code to copy your unique embed code to your clipboard.
  3. Paste this code just before the closing body tag on all pages of your website where you want to display the widget.
  4. Go to Control Integrations  EMBEDDABLE WIDGET Setup.
  5. Add the domains of the websites you want to install the widgets on under Trusted domains, and press Save changes.
  6. The widget will immediately become active on your website.

Here's a few ways you can add the embed code to your webpages (step 3):

  • Email the embed code to your favourite web developer, along with the above instructions, and work with them to install it on the pages you want.
  • Use your CMS (Content Management System) to directly add the code to the pages you want.
  • Use Google Tag Manager to add the embed code with a Custom HTML tag.

 

 

⚠️ The embeddable widgets will only execute on domains you’ve added to ‘Your Trusted Domains’ (i.e. whitelisted domains). If you don’t add any trusted domains, then the widgets won’t be allowed to load anywhere.

💎 Before you enable the widgets on your website, remember to customize the look and feel of the conversational widget to match your brand, and set up configuration to optimise the search results of the widgets.

⚠️ The embeddable widgets only display if content is found for the current page (to avoid your users seeing a blank widget). If no automatic topic suggestions are found for a page that you want to display the widgets on, use our content configuration tool to pin some topics in the widget for that URL.

⚠️If you’re using a Content Security Policy (CSP) on your website, you may need to whitelist the source URLs used by the widgets in order to get them working. Signs that your CSP is interfering with the widgets include: the widgets don't display on the page after following the steps above, or the widgets appear, but no search results display.

 


Click to see the base URLs of the sources used by the widgets:

 

 

  • https://embeddable-widgets.insided.com- the endpoint used to retrieve the widgets themselves.
  • https://conversational-eu-west-1.api.insided.com - the search endpoint used by the widgets if your community is hosted in the EU.
  • https://conversational-us-west-2.api.insided.com - the search endpoint used by the widgets if your community is hosted in the US.

14 replies

I've got a question regarding the channels: we want to embed a widget to our software, but customers can run our software under URLs of their own choosing.



In the channels you have to setup a base url, but the URLs will differ for each customer, for instance:

https://insided.iprova.nl or https://infoland.iprova.nl, or even - for customers who run our software on their own servers https://thisisatestenvironment/.



Do you now how we can arrange this?
I figured out that the base url only affects the curated content (topics that belong to a specific url (or parts of an url), set in the content configuration part of embeddable widgets.



So for automatically found topics the base url isn't needed, but for topics you really want to show on a specific page, it is a problem.
Thanks for your question Koen!



Correct - the Base URL of a channel currently affects the content you've set up using content configuration, as well as the 'Words to exclude from search queries' field on a Channel.



The product team are currently looking into how to make this less rigid (for your precise use case - configuring the embeddables for multiple subdomains). Unfortunately I'm not exactly sure what the solution will be but the team is aware of the issue and working on a way to make this possible.
Thanks for your feedback @Frank! Go product team! 🤗

Hi, I’ve a question about the way how you can trigger Conversational Widget. Is it possible to trigger the modal window somehow else (custom element on website, like button) other than by floating / button trigger type offered by InSided? Thanks!

Badge

Hey @lukas.ther - welcome to inSpired!

We have a JavaScript API for the embeddable widgets. Opening the widget is not actually one of the functions we have available….but it is possible to achieve this using the following (under-the-hood) JavaScript: inSided.conversational.$store.dispatch('SLIDER_OPEN', {})

Hey - 

So I’m about to pop this baddy into our SaaS product. Issue is, the URL for each client is going to be different. e.g. accounts.bizzabo.com/823402/events/23425/contacts. The numbers shown in that example are variable. Is there a random operator I can use like * or similar?

We definitely need this functionality, cos we will wanna be super detailed in what items show on what page.

Ben

I know that when I search within the community it will search across my Zendesk and Skilljar instances as well as Community content. Does the in-app widget do the same and scraping and providing potential results? 

Install our conversational widget on your website to provide community-driven help to your customers, right where they need it. The conversational widget floats above the page, and can be activated by clicking a trigger. It’s quick and easy to install - you just need to enter basic information about your website in Control, then add your unique embed code to your webpages. Follow the steps below to install and activate the conversational widget.
 

1c223b17-7cbd-43ac-bc5f-433d4df4d95e.png

 

How To Install The Conversational Widget On Your Website

 

  1. Go to Control Integrations  EMBEDDABLE WIDGET Installation.
  2. Press Copy code to copy your unique embed code to your clipboard.
  3. Paste this code just before the closing body tag on all pages of your website where you want to display the widget.
  4. Go to Control Integrations  EMBEDDABLE WIDGET Setup.
  5. Add the domains of the websites you want to install the widgets on under Trusted domains, and press Save changes.
  6. The widget will immediately become active on your website.

Here's a few ways you can add the embed code to your webpages (step 3):

  • Email the embed code to your favourite web developer, along with the above instructions, and work with them to install it on the pages you want.
  • Use your CMS (Content Management System) to directly add the code to the pages you want.
  • Use Google Tag Manager to add the embed code with a Custom HTML tag.

 

 

⚠️ The embeddable widgets will only execute on domains you’ve added to ‘Your Trusted Domains’ (i.e. whitelisted domains). If you don’t add any trusted domains, then the widgets won’t be allowed to load anywhere.

💎 Before you enable the widgets on your website, remember to customize the look and feel of the conversational widget to match your brand, and set up configuration to optimise the search results of the widgets.

⚠️ The embeddable widgets only display if content is found for the current page (to avoid your users seeing a blank widget). If no automatic topic suggestions are found for a page that you want to display the widgets on, use our content configuration tool to pin some topics in the widget for that URL.

⚠️If you’re using a Content Security Policy (CSP) on your website, you may need to whitelist the source URLs used by the widgets in order to get them working. Signs that your CSP is interfering with the widgets include: the widgets don't display on the page after following the steps above, or the widgets appear, but no search results display.

 


Click to see the base URLs of the sources used by the widgets:

 

 

 

  • https://embeddable-widgets.insided.com- the endpoint used to retrieve the widgets themselves.
  • https://conversational-eu-west-1.api.insided.com - the search endpoint used by the widgets if your community is hosted in the EU.
  • https://conversational-us-west-2.api.insided.com - the search endpoint used by the widgets if your community is hosted in the US.

 

I’m having trouble with the embedded widget. Specifically, it appears that I must allow `’unsafe-eval’` in my content security policy in order for the widget to work.  Is there any way to get around this limitation? I really don’t want to have to turn unsafe-eval on everywhere in order to use the widget.

 

***

a bit more info: the error shows up as elementInIFrame.contentDocument being undefined, which your script then attempts to access.

Badge

Heya @William Pleasant-Ryan !

Sorry for the delay on this one. I have to admit that Content Security Policy stuff is a bit of a nightmare to figure out, even for me. But I’m also pretty certain that unsafe-eval is not what you’re after here - especially not an open ended one!

I get the feeling that unsafe-inline might be more appropriate. But if you absolutely have to end up using unsafe-eval, you might be able to lock it down to just the relevant domains, so that at least it’s not an open invite to the entire internet. Please could you show us your CSP though, as it may help with identifying what’s wrong.

Thanks!

Badge

Hey @daniel.boon . Quick question. 

We don’t want the widget to appear as a label on the right hand side of the page, but rather to open up when users click on the word ‘community’. I assume that’s possible and we can have the pop up to appear only when someone clicks on a CTA, rather than a permanent element on the side. 

 

let me know if the above makes sense. 

Badge

We don’t want the widget to appear as a label on the right hand side of the page, but rather to open up when users click on the word ‘community’. I assume that’s possible and we can have the pop up to appear only when someone clicks on a CTA, rather than a permanent element on the side. 

Hey @Gabolino - one of my previous replies might be helpful here → this JavaScript enables you to open the widget programmatically (e.g. when someone clicks on a link that you’ve added to your menu). Hope this helps.

We have a JavaScript API for the embeddable widgets. Opening the widget is not actually one of the functions we have available….but it is possible to achieve this using the following (under-the-hood) JavaScript: inSided.conversational.$store.dispatch('SLIDER_OPEN', {})

 

Badge

Fab. Thanks @daniel.boon 

Userlevel 3
Badge +1

Are there any examples about the widget where community content is embedded to the web page? Sorry about my terms, I don`t mean this floating widget, is this something that it isnt widget at all? :)

I am looking for the ways to embed community discussion or article to our home page. With embedding the content can be read easily, without any clicks, just by visiting the home page.

Reply