How to expose a Flow in a web page

Once you have created your Flow in Globant Enterprise AI, following the steps in How to create a Flow, you may want to expose it in a web page. To do this, follow the steps below.

Step 1: Create an application key

Go to the Flow you want to expose. From the Side Navigation Menu, select Configuration and then Application Keys. Click on the Generate Key button.

In the Type field, select WEBSITE and in Key Name, enter a name, for example, "Documentation". Confirm the operation by clicking on Save.

Click on the copy icon shown next to the generated key. This will allow you to customize and use the code on any external page that requires integration with the Flow created.

Step 2: Understand the Script's Functionality

Once you have clicked on the copy icon next to the generated key, you will be able to view the JavaScript code script.

(function () {
  var script = document.createElement('script');
  script.src = "https://botbuilder.dev.fluentlab.ai/fluentlab/static/js/webcomponent/fluentlab-websdk.js";
  document.head.appendChild(script);
  window.addEventListener('FluentLabWebComponentsReady', function () {
      var fluentlabElement = document.createElement("fluentlab-app");
      fluentlabElement.branding = "globant";
      fluentlabElement.launcher = true;
      fluentlabElement.locale = "en";
      fluentlabElement.title = "Multibot Assistant";
      fluentlabElement.socketUrl = "https://botbuilder.dev.fluentlab.ai/fluentlab/websocket?x-api-key=API-KEY";
      fluentlabElement.botId = "BOT-ID";
      fluentlabElement.updateStyles({
        '--fluentlab-font-family': '"Avenir", "Helvetica", "Arial", sans-serif',
      });
      fluentlabElement.setExtraData(function(body) {
        // TODO: Send custom data to bot as requestExtraData
        return {};
      });
      fluentlabElement.addEventListener('fluentlab-callback-click', function(event) {
        // TODO: Implement handlers for the callback actions defined in the flows
      });

      document.body.appendChild(fluentlabElement);
  });
}());

This script performs several key functions that ensure that the Flow integrates correctly into your web page:

• Dynamic Script Loading: The script automatically creates and adds a script element to your web page. This element loads the web SDK needed to integrate the chat from the URL https://botbuilder.dev.fluentlab.ai/fluentlab/static/js/webcomponent/fluentlab-websdk.js.

• Component Initialization: Once the web components are ready (when the FluentLabWebComponentsReady event is fired), the script creates a new element called fluentlab-app. This is the main chat container, where you define how the assistant will appear and behave on the page.

• Custom Configuration:

- Branding: The branding attribute sets the brand that will be displayed in the chat. In this case, "globant" is used.

- Launcher: The launcher attribute controls whether the chat should be visible or hidden until the user activates it.

- Locale and Title: locale defines the language of the assistant (in this case, English), and title sets the visible name of the assistant, which here is "Multibot Assistant".

- Socket URL and Bot ID: socketUrl specifies the URL of the socket server to handle the communication, and botId is the ID of the bot that manages the chat session.

• Visual Styles and Events: The script also customizes the appearance of the chat. For example, the fonts used in the chat are configured with updateStyles. In addition, events are handled via addEventListener, including clicks made by users within the chat. This allows you to add more interaction based on the Flows you have configured.

Step 3: Customize Further Using HTML Attributes

In addition to the initial configuration, you can further customize the Flow’s behavior by using HTML attributes. These attributes allow you to fine-tune how the chat behaves on your page.

The available attributes and their functions are listed below:

• audioUrl (String): URL of the audio file to be played with incoming messages.
• autoFocus (Boolean, default false): Automatically returns focus to the chat input field after interacting with another component of the chat frame.
• delay (Number): Sets a delay between responses; if not specified, the delay is calculated based on the length of the responses.
• disableTextInteraction (Boolean, default false): Allows hiding or showing the user's text input.
• geolocation (Boolean, default false): Sends geolocation with each websocket message.
• launcher (Boolean, default false): Controls the visibility of the chat view.
• preview (Boolean, default false): Shows the first floating message on the launcher if the chat frame is closed.
• title (String): Name of the assistant.
• sessionId (String, default uuid.v4): Unique identifier of the session to establish a conversation.
• showExpiration (Boolean, default false): Displays an expiration message instead of refreshing the server context.
• socketUrl (String): URL of the socket for the connection.
• voiceEnabled (Boolean, default false): Enables voice synthesis by default.
• voices (String): Voices to be used when voice synthesis is enabled, allowing you to specify more than one voice and adjust the speed and pitch.

Step 4: Custom methods

Optionally, you can use custom methods to send additional parameters and manage events in the chat component using fluentlab-app. These methods provide greater flexibility and customization of the chat behavior, enriching the end user’s experience on your web page.

setMessageBuilder

This method allows sending additional parameters every time a message is posted to the socket, using the setMessageBuilder method. You can define a callback that receives and processes these extra parameters, in addition to the query and the session identifier (sessionId).

Example:

   var rest = {
     language: "english",
     platform: "react",
     anotherParam: false,
   };

   var FluentLab = document.querySelector("fluentlab-app");

   FluentLab.setMessageBuilder(function ({ query, sessionId, ...rest }) {
     return {
       destination: "/app/websocket/chat",
       body: JSON.stringify({ ...query, ...rest, sessionId }),
     };
   });
   

In this example, the rest object contains additional parameters that will be sent with the message every time it is posted to the socket.

addRender

This method allows you to customize the rendering of certain types of rich messages. Specify the type of message and the content you want to render. For example, create a custom-styled container every time an HTML type message is received.

Example:

   var FluentLab = document.querySelector("fluentlab-app");

   FluentLab.addRender("HTML", function (data, container, onClick) {
     var div = document.createElement("div");
     div.innerHTML = data.html;
     div.style.border = "1px solid red";
     container.appendChild(div);
   });
   

This code customizes the way HTML messages are rendered inside the chat container.

onIncomingMessage

The onIncomingMessage method allows you to define a callback that is executed every time a message is received in the chat.

Example:

   var FluentLab = document.querySelector("fluentlab-app");

   FluentLab.onIncomingMessage(function (messages) {
     console.log("Message received:", messages);
   });
   

With this callback, you can handle any specific logic you want every time the bot sends a message to the client.

Slots

Slots allow you to inject HTML into specific sections of the chat component, customizing its structure. Each slot has a name that defines its position.

Example:

   <fluentlab-app>
     <header slot="custom-header">
       <h1>This is a custom header</h1>
     </header>
   </fluentlab-app>
   

In this case, the slot called custom-header places a custom header at the top of the chat.

Styles Overriding

You can modify the CSS styles of the chat component by overriding default values using custom CSS properties that use the --fluentlab- prefix. These values are applied to the component's Shadow DOM.

Example:

   <custom-style>
     <style is="custom-style">
       fluentlab-app {
         --fluentlab-primary-color-main: #abcdef;
       }
     </style>
   </custom-style>
   

This code changes the primary color of the chat to a custom shade (#abcdef).

Event Handling

It is possible to add listeners to specific events of the chat component. Some examples of events include:

• fluentlab-callback-click: Fired when the user clicks on a CALL-TO-ACTION component of CALLBACK type.
• fluentlab-user-input: Fired when the user sends a message (presses the enter key or clicks on the send button).

Example:

   var FluentLab = document.querySelector("fluentlab-app");

   FluentLab.addEventListener("fluentlab-user-input", function(event) {
     console.log("User message:", event.text);
   });
   

This listener logs the incoming messages that the user sends to the bot.

Step 5: Test the bot

Once you have made all the necessary adjustments, you can incorporate it into your web page and start testing to make sure everything works properly.

If you prefer to test more immediately without modifying your source code, you can use the Google Chrome developer tool.

To do so, follow these steps:

1. Open your browser and go to the top right, where you will see an icon with three dots.
2. Click on the three dots and select More tools.
3. Next, select Developer Tools.
4. In the window that opens, go to the Console tab.
5. Paste the JavaScript code generated in the previous step into the console and press Enter.