NAV

How giosg script works?

Let’s assume that there is a giosg account for the organization “Example Ltd.” They integrate Giosg script to their website example.com. This page describes how the Giosg script would work on the visitor’s browser when they visit a web page on example.com.

Script tag

The Giosg script is integrated to a website by adding the HTML script snippet to the <head> tag of every HTML page on the website. Depending on the way the website is implemented, it is usually enough to add this script once to the base HTML layout.

<!-- giosg tag -->
<script>
(function(w, t, f) {
  var s='script',o='_giosg',h='https://service.giosg.com',e,n;e=t.createElement(s);e.async=1;e.src=h+'/live/';
  w[o]=w[o]||function(){(w[o]._e=w[o]._e||[]).push(arguments)};w[o]._c=f;w[o]._h=h;n=t.getElementsByTagName(s)[0];n.parentNode.insertBefore(e,n);
})(window,document,1);
</script>
<!-- giosg tag -->

The script looks similar to every organization account, but each organization will have a different ID included in the script.

The actual script for the organization, with the correct ID, can be found at the Company script tag page after signing in to Giosg.

When the HTML page is loaded, the script tag is executed with the following effects:

Core loader component

The script loaded from https://service.giosg.com/live/ will contain a core loader component for the Giosg client functionality.

About performance: The core loader script is served with a 24 hour cache expiration time, meaning that browsers will load this only on their first page load and then again after 24 hours. The script is minimized and compressed for the optimal loading.

This core loader script contains the following things:

Loading client configuration

As soon as core loader component is loaded, it will make an AJAX request for the configuration from https://service.giosg.com/api/v2/visitor/settings/<organizationId>?url=<currentUrl>.

For example: https://service.giosg.com/api/v2/visitor/settings/1/?url=https%3A%2F%2Fwww.giosg.com%2F

Note that for security reasons, the script requires a correct Referer HTTP header. Otherwise it returns an error. This ensures that no other organization is able to add other organization’s script tags to their website.

The request is asyncrhonous so it won’t block the website from loading its own assets. The response will contain all the required information to set up the client script, including:

The client configuration is stored to attributes of the global giosg namespace object for later use.

Client script

Once the client configuration is loaded, another script tag is injected to the DOM, loading the JavaScript from https://service.giosg.com/static/visitor.<scriptVersion>.js. For example: https://service.giosg.com/static/visitor.4e1f047cd8c52f96.js

About performance: This script is separated from the core loader script because this file will be cached for a very long time (about a year). This way, browsers will load this only on their first page load and then again only whenever the contents of the script file are updated, changing the version number in the URL.

The client script contains the actual logic that is executed in the example.com page environment. This includes:

Client iframe

The client script will add an iframe element to the DOM.

The most important function of the iframe is to contain the chat conversation. The iframe will be served from the different origin than example.com. It will be always served from the https://service.giosg.com origin. This enables the following important features:

When the iframe is created, some information about the current page and the current environment (such as the page URL and the organization ID) is passed in the iframe URL. The HTML page loaded in the iframe will load the required script and stylesheets for the chat conversation logic.

About performance: The scripts and stylesheets loaded by the iframe are cached for a very long time (about a year). This way, browsers will load these only on their first page load.