<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1523709774591272&amp;ev=PageView&amp;noscript=1">
GIOSG_HiRes-18_edited2_tt.png

Back to support main page

For web developers

How do I install the Giosg script?

Adding the Giosg script in your site will install our software in your site. 

The Giosg script needs to be added to the website's HTML <head> element. 

The script can be found in your Giosg account, if you don't have an account yet, we will send it to you via email.

If you have an account, follow these instructions to get the script:

Open the Giosg Console -> Wrench icon -> Company -> Script tag
(Or login to your account and simply click on this link to get your Giosg script).

Here is a example of the script. (The number 12345 needs to be changed to your giosg company ID).

<!-- 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,12345);
</script>
<!-- giosg tag -->

How do I install the Giosg script with WordPress?

Adding the Giosg script to your site with WordPress can be done in one of two ways:

  1. Install the script using a WordPress plugin following the plugin installation guide.
  2. Install the script manually  using WordPress following the manual installation guide.

Can I hide elements from a page when there are no operators online?

You can use the following rule to hide an element with the selector #my-element from the page when there are no operators.

hide_element_example.png

How do I install basket?

You can update the contents of Giosg Basket with javascript. You should submit the whole shopping cart data every time your visitor’s shopping cart data changes on your website. Each product has to have a name, price and quantity.

If your site uses multiple currencies, you need to convert the prices to a single currency before submitting.

To submit the products use the following code

products = [{ name: 'Fluffy Bunny', price: '20.50', quantity: 1 }]
_giosg('shoppingCart', 'submit', products)

Discount coupons should be handled by sending them as products with a price of 0 and setting a total price for the cart that includes the discounts

products = [{ name: 'Fluffy Bunny', price: '20.50', quantity: 1 }, { name: 'Discount', price: '0', quantity: 1 }]
_giosg('shoppingCart', 'setTotalPrice', '10.50')
_giosg('shoppingCart', 'submit', products)

When the user purchases the cart, you can mark it as purchased by sending this command.

_giosg('shoppingCart', 'freeze')

 

You can find more information here https://giosg.github.io/giosg_docs/basket.html#giosg-basket 

How do I enable Google Analytics and Google Tag Manager integration?

Integrating giosg to your existing Google Analytics or Google Tag Manager account can be done by following our comprehensive Google Analytics installation guide.

How can I add information about the visitor to the chat?

You can add information about the visitor to the chat. If you need to ensure that the visitor can't modify the information you need to generate a api signing key in the Giosg console and use it to sign the visitor data.

To add the data without signing you can use this code. 

_giosg('visitor', 'submit', { username: <visitor name> }, 'plain', false, [{ id: <room_id> }]);

You can find more information here https://giosg.github.io/giosg_docs/javascript_api.html#submit-visitor-data

Which ip addresses do I need to allow for Giosg to work?

For customer service agents using the giosg console

  • https traffic to and from service.giosg.com (ip 176.9.141.35 and 5.9.235.235)
  • websocket and xhr traffic to and from messagerouter.giosg.com (ip 5.9.225.163)

If your company is using custom integrations, then you need to allow incoming traffic to your integration from 176.9.141.35

How do I use the external goal API?

The external goal API is provided to enable goals that happen outside of the website. This enables us to connect the offline goal, which happened in-store or over the phone, to a visitor on the website.

You need the following information

  • Visitor id: This can be your own customer/visitor id or any other id you want to use
  • A goal configured in Giosg system. The goal id is used when sending the purchase info to Giosg
  • If the visitor id is not already saved to your own system, a public API to your CRM

Description of the process

  1. The visitor enters the website and the visitor id is sent to Giosg through Visitor Identifier API. The id is generated by customer and the customer has to make sure that the same id is also saved to their own CRM or other system.
  2. The visitor visits the shop or makes the purchase over the phone
  3. The purchase is marked to CRM or other system
  4. The system sends Giosg information to the Goal Match API to verify the purchase. This information must include visitor id, timestamp and goal id. If you want to add the purchase price, you can do that to be able to see it in the reports.

Technical documentation

For more information on how to implement this to your own system, please visit the following pages

Tracking offline goals with Goal Match API

Visitor Identifier API

Goal Match API

How do I customize the chat window?

The Giosg chat window can be customized with css styles. If required it is also possible to override html templates used to render the chat window. Chat window customization is an additional feature. Contact support@giosg.com for more information.

To access the chat window style editor

  1. Login to giosg console
  2. Click wrench icon in top bar and click "More settings"
  3. Click Chat windows
  4. Click "Create new window"
  5. Give your chat window a name and save it
  6. Click "Open style editor"
  7. You will be presented with the view where you can edit the css

How can I test the chat window while customizing it?

Normally you don't want to directly edit css or templates of chat window that is in use because after saving, changes are automatically published. The preferred way is to add the chat to you test environments and develop custom styles and templates using it.

To add your own test environment

  1. Add your account's Giosg script to your test environment
  2. Add your test environment to the Giosg console
    1. Click the wrench icon from the top menu
    2. Click Rooms
    3. Click "Create new room"
    4. Type in your test enviroment's domain
  3. Choose which chat window to use in the test environment
    1. After you have created the room click it to access it's settings
    2. Change the chat room window your customized window

If you don't have dedicated testing site it is also possible to use a demo environment provided by Giosg. To add it

  1. Add the domain demo.giosg.com to your Giosg console
  2. Choose the chat window used in the demo.giosg.com room
  3. You can access the test enviroment at http://demo.giosg.com/?c=[YOUR_GIOSG_ID]

    You can find the Giosg ID in the giosg console at https://service.giosg.com/en/settings/#/live/company/account/

How can I add custom fonts to the chat window?

The chat window is composed of two parts. The outer part is on the website the visitor is visiting. The inner part is a iframe loaded from Giosg servers. For the outer part you can use any fonts that are already loaded on the page.

If you want to use custom fonts for the elements in the iframe you need to add the font-face declarations under the iframe template. You might need to allow the font's to be loaded from the service.giosg.com domain. You can also upload the fonts to the giosg assets in your account and use those urls in your font-face declaration.

Why does my chat window look different in IE?

In some cases IE handles css specifity differently than Chrome and Firefox. You might need to prefix your css classes with .giosg_dialog_container to ensure that they are used. The other option is to add !important to individual css rules.

 

Does giosg script slow down my website?

Short answer is, Not Really.


Giosg Live script tag is asynchronous and doesn't have much impact on initial rendering speed of your website.
Asynchronous means that giosg script tag writes another script to your website and starts loading scripts in parallel with
other resources of the page so that loading of giosg Live doesn't block rendering of the page.


Only customer specific settings need to be downloaded for every page load. Other resources and scripts that giosg use are
heavily cached until new version is released from giosg. This means that if website visitor has visited your site or some other
site that has giosg installed they already have all the scripts available except customer specific settings.


Resources are also compressed using GZIP to minimize bandwith usage. Javascript and CSS files are also minified. For very
slow mobile connections downloading of giosg scripts in parallel with actual page may slow down page loading but this is
not notable for majority of users. Usually there are other factors that affect the website speed more than giosg live chat.