Key info about inSided’s embeddable widgets, from a technical perspective
This document provides answers to technical questions concerning inSided’s Embeddable widgets.
How exactly do the embeddable widgets work?
The embeddable widgets are a set of JavaScript components that you can insert in pages of your website, using an embed code.
When a user loads a webpage where the embed code is installed, the following sequence takes place:
- The embed code loads some inSided’s conversational script loader.
- The script loader calls our conversational API to check if any widgets are set up for the current URL.
- The script loader asynchronously loads the required widgets.
- Once the widgets finish loading, they display on the webpage, along with content from your community.
Will the embeddable widgets have an impact on the appearance/behaviour/performance of the webpages they're placed on?
The embeddable widgets won't negatively impact the layout, appearance, or performance of your website.
To avoid any impact on the layout/appearance of your website, we inject the widgets in an isolated scope (using iframes). Iframes provide our widgets with a different DOM tree and a separate style context, which will never affect existing elements or styles on the host page.
We have two different kinds of widgets right now:
- Out-of-context widgets (e.g..: Conversational widget): These are embedded at the end of your website’s DOM tree, so as not to interfere with the current structure of your website.
- In-context widgets (e.g..: In-page widget): These widgets are embedded in an anchor point that you need to setup on your webpages, following inSided’s instructions. The content included in this anchor element is an iframe, and the only DOM element affected will be the provided anchor element.
The embeddable widgets script loader creates a global inSided object in the window - this is the only impact of our codebase. We only bind one event to the window in order to know when the conversational script loader has loaded successfully. We won't add any more global events.
We use webpack to bundle the code; we serve these bundles gzipped to reduce network transmission time. These are the current sizes of our bundles:
- (51.5KB) Conversational-script-loader
- (51.8KB) Conversational-slider
- (60KB) Conversational-slider-content
What third-party libraries do the embeddable widgets rely on?
This is our current dependency list:
"axios": "^0.17.1",
"js-cookie": "^2.2.0",
"date-fns": "^1.29.0",
"vue": "^2.5.9",
"vuex": "^3.0.1"
We use axios to manage http requests, js-cookie to manage cookies, date-fns to format dates, vue and vuex as our main framework.
What browsers do the embeddable widgets support?
We support all modern/popular browsers: Chrome, Firefox, Safari, Internet Explorer 11, and Edge (we support both Chrome/Safari on desktop as well as mobile).
What kind of calls do the embeddable widgets make?
- When the page is loaded with the Embed Code, our conversational script loader resolves the widgets that are needed for the current URL.
- The script loader makes a XHR call to our conversational API to retrieve the configuration for the current URL.
- If no configuration is available, no further actions will be done. If a configuration for the current URL is found, it will inject a 'script async' tag with each one of the widgets as required.
- When the widgets are loaded in the window, they will self-execute and resolve their content, performing some additional XHR requests just for event tracking.
Conversational script loader:
- Queries the conversational API to retrieve configuration for current URL. If there is configuration available, the response will bring back what widgets have to be loaded and the search results needed for the widgets.
- Injects the bundles with a script tag (GET call)
Conversational widget:
- Sends tracking events (XHR call)
In-page widget:
- Sends tracking events (XHR call)
We send tracking events to monitor usage of the widgets in order to improve the product. We send all of these calls through inSided’s conversational API.
Are the embeddable widgets GDPR compliant?
Yes. We do not collect any personal data through the embeddable widgets, and we don't store any cookies to the user's device. This means all tracking events we gather are anonymous and cannot be linked to any one individual.
How does inSided deliver updates to the embeddable widgets?
We achieve continuous delivery of features through versioned releases. You’ll automatically receive the latest release of the embeddable widgets instantly, without having to update the embed code. Your embed code will never change.
Each time a new release is deployed, we upload it to our CDN and invalidate the cache - this means you'll always be running the latest version.
We follow best technical practices. We use a TDD (test-driven development) approach to develop the widgets, with strict lint rules in place and automated end-to-end testing.
