Smart Agent Snippet

Integration

The installation of the Smart Agent solution on the customer's site is done by integrating a snippet of javascript code within the desired page.

JS

Integrate the Javascript snippet just before closing the </body> tag. The Smart Tribune script must be loaded as far downstream as possible in the script loading chain in order to avoid possible conflicts with the scripts present on the client page.

<script type="text/javascript">
  window.addEventListener('STSmartBotLoaded', function (e) {
    e.detail.init({
      botId: 'xxx',
      locale: 'en',
    });
  });
</script>
<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/smartbot.main.js"
></script>

The integration of the code snippet above is sufficient to allow the partial display of the Smart Agent within the page. You must also communicate your domain name to your Smart Tribune contact point so that we allow the product to be displayed completely on your environment.

Please note, the link to smartbot.main.js is a demonstration of the product, the smart-tribune folder in the url will be replaced by the one that will be communicated to you. The url changes completely during the transition from pre-production (public) to production. The complete url is communicated by your Smart Tribune contact point in charge of your account.

info

The domains calling on the specified bot must be declared beforehand directly in the bot configuration in Smart Dashboard by your Account Manager.

Validation environment

caution

The path to the smartbot.main.js file evolves according to the environment: public or production. This url differs depending on the environment on which the solution is to be installed at the customer site. It is customary to use PUBLIC for pre-production and to use PRODUCTION for production at the customer site. All this information is communicated by Smart Tribune after the development phase.

PRODUCTION script

<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/smartbot.main.js"
></script>

PRE-PRODUCTION script

<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/public/smartbot.main.js"
></script>

Variables list

Variable	Type	Condition	Example	Description
botId	string	required	botId: "xxx"	Variable specific to each customer, it corresponds to the identifier of the bot to use. This is available in Smart Dashboard, the content administration interface. It will be provided by your Account Manager.
locale	string	required	locale: "en"	It allows the customer to specify in which language the solution should be displayed. This only applies to multilingual bots.
containerId	string	optional	containerId: "my-bot"	Identifier of the HTML element in which the Smart Agent will be rendered. By default, the value is st-smartbot.
env	string	optional	env: "production"	Execution environment. Possible values: production or preproduction.
variables	object	optional	variables: { key: value }	Object containing custom variables (string, number or boolean) that will be passed to the dialogue.
auth	bool	optional	auth: true	Enables or disables the authentication system. The default value is false.
ui	object	optional	ui: { display: {...} }	User interface parameters (see dedicated section below).

UI Parameters

The ui parameter allows you to configure the Smart Agent user interface:

ui: {
  display: {
    alwaysOpen: true,
    displayAiGenerationVoteSatisfaction: true
  },
  authentication: {
    defaultLoginMethod: "sso",
    account: "my-account"
  }
}

Sub-object	Property	Type	Description
display	alwaysOpen	bool	If true, the Smart Agent always stays open without the ability to close it.
display	displayAiGenerationVoteSatisfaction	bool	If true, displays the satisfaction vote for AI-generated responses.
authentication	defaultLoginMethod	string	Default login method. Possible values: password or sso.
authentication	account	string	Account identifier for authentication.

Optional functions

Use the show() function

The show() function will allow you to open the Smart Agent.

From a...	Description
button	Just call the show() function on your button.

<button onclick="window.stSmartBot.show()">Open chat</button>

From a...	Description
timer	Place a setTimeout in a <script> tag after initializing Smart Agent.

<script type="text/javascript">
  window.addEventListener('STSmartBotLoaded', function (e) {
    window.stSmartBot = e.detail;
    window.stSmartBot.init({
      botId: 'xxx',
      locale: 'en',
    });
    setTimeout(() => {
      window.stSmartBot.show();
    }, 3000);
  });
</script>
<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/smartbot.main.js"
></script>

From a...	Description
scroll	Place a listener after initializing Smart Agent.

<script type="text/javascript">
  window.addEventListener('STSmartBotLoaded', function (e) {
    window.stSmartBot = e.detail;
    window.stSmartBot.init({
      botId: 'xxx',
      locale: 'en',
    });
    window.addEventListener(
      'scroll',
      function (e) {
        window.stSmartBot.show();
      },
      false,
    );
  });
</script>
<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/smartbot.main.js"
></script>

If you need to use these functions outside the script (on a button for example), you will need to store stSmartBot inside window which is a global variable:

<script type="text/javascript">
  window.addEventListener('STSmartBotLoaded', function (e) {
    window.stSmartBot = e.detail;
    window.stSmartBot.init({
      botId: 'xxx',
      locale: 'en',
    });
  });
</script>
<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/smartbot.main.js"
></script>

Use the hide() function

The hide() function will allow you to close the Smart Agent.

From a...	Description
button	Just call the hide() function on your button.

<button onclick="window.stSmartBot.hide()">Close chat</button>

Use the read() function

The read() function will allow you to retrieve the current initialization parameters.

From a...	Description
script	Call the read() function to get the configuration.

<script type="text/javascript">
  var config = window.stSmartBot.read();
  console.log(config);
</script>

Use the updateVariables() function

The updateVariables() function will allow you to update the variables of the current dialogue.

From a...	Description
script	Call the updateVariables() function with an object containing the new values.

<script type="text/javascript">
  window.stSmartBot.updateVariables({
    userName: 'John',
    isVIP: true,
    accountAge: 5,
  });
</script>

Use the getVariables() function

The getVariables() function will allow you to retrieve the current dialogue variables.

From a...	Description
script	Call the getVariables() function to get the variables.

<script type="text/javascript">
  var variables = window.stSmartBot.getVariables();
  console.log(variables);
</script>

Events

The Smart Agent emits custom events that you can listen to:

STSmartBotLoaded

Triggered when the Smart Agent script is loaded and ready to be initialized.

<script type="text/javascript">
  window.addEventListener('STSmartBotLoaded', function (e) {
    console.log('Smart Agent loaded', e.detail);
  });
</script>

STSmartBotInitialized

Triggered when the Smart Agent has been successfully initialized.

<script type="text/javascript">
  window.addEventListener('STSmartBotInitialized', function (e) {
    console.log('Smart Agent initialized', e.detail);
  });
</script>

Complete example

Here is a complete integration example with all options:

<script type="text/javascript">
  window.addEventListener('STSmartBotLoaded', function (e) {
    window.stSmartBot = e.detail;
    window.stSmartBot.init({
      botId: 'xxx',
      locale: 'en',
      containerId: 'st-smartbot',
      env: 'production',
      variables: {
        userName: 'John',
        userType: 'premium',
      },
      auth: true,
      ui: {
        display: {
          alwaysOpen: false,
          displayAiGenerationVoteSatisfaction: true,
        },
        authentication: {
          defaultLoginMethod: 'sso',
          account: 'my-account',
        },
      },
    });
  });

  window.addEventListener('STSmartBotInitialized', function (e) {
    console.log('Smart Agent ready!');
  });
</script>
<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/smartbot.main.js"
></script>