@thrio/thriowidgets v1.0.7

Thrio-widgets

Thrio-Widgets is an SDK (Software Development Kit) created to allow our customers to install it on their websites and run Thrio widgets on their web pages. Thrio-Widgets provides a simple and flexible way to add various widgets to your website, such as live chat, feedback forms, surveys and much more. This documentation will guide you through the process of installing and using Thrio-Widgets.

Installation

Thrio-Widgets can be easily installed via NPM package or from a zip file.

If you want to install thrio-widgets as a NPM package, first be sure that you have installed node.js on your computer and the folder node_modules exists in your project root. If the above conditions are met, you can proceed with the following steps:

• Open your terminal or command prompt.
• Navigate to your project directory where you want to install Thrio-widgets.
• Run the following command: npm install thrio-widgets.

Once the installation is complete you should be able to see a thrio-widgets folders inside node_modules. Alternatively, you can download the zip file from our website or from your support contact at Thrio and extract it to your project directory.

Usage

After installing thrio-widgets, you will be able to use its functionality in your project. To do this, you just need to include a script in the head tag of your index.html file. This script will load the thrio-widgets library and make its functions available to your code.

<script type="module">
    var params = {
        host: 'login.thrio.io,
        tenantId: 'acme',
        campaignId: '234ca1d7d481323ad48785z4',
        trace: true,
        context: {
            name: 'John Doe',
            email: 'john.doe@gmail.com',
            customerId: '123456789'
        } 
    };
    
    window.thrioParams = params;
</script>
<script src="./node_modules/thriowidgets/thriowidgets.js" type="module"></script>

It’s important to keep the structure of the added code as two separate scripts, specifying the type as module. Also, the path to thrio-widgets.js may be different depending on how it was installed in the project.

Mandatory parameters

There are 3 mandatory parameters you must provide

host

This is normally the thrio host login.thrio.io but in some cases it maybe a host provide by Thrio with the name of the tenant, for example a acme.thrio.io

tenantId

This is the tenantId provided by Thrio when the tenant was created. It is normally the name of the company that the customer provided to Thrio. Follwoing the example, the tenantId would be acme.

campaignId

The entry point in Thrio is the campaign that handles the different behavior of the application. You can find this ID in the Thrio application in the campaign section. In the example provided the campaignId would be 234ca1d7d481323ad48785z4.

Optional parameters

Additionally, you can pass optional parameters to the widget.

trace

Boolean value <true | false> indicating if you want the application to output logs in the console or not.

context

An object that is key/value simple parameters that wll be made available in the application (workflow, function, survey, chat). In the example we have provided the name, email and customerId that could be presented in the survey back to the customer or used in the workflow to get additional information based on the customerId. The name of the parameters in the context object must follow JavaScript notation and not have any spaces. For example one could have pass firstname and lastname instead of the name.