Skip to main content
Create an account at Fini AI to get started

​
Deploy Fini widget

Guide consists of 5 main sections:
  1. Connections details
  2. General setup
  3. Replies setting
  4. Branding
  5. Deploying Fini widget

​
Connections details

1

Go to Deploy tab

Step 1 screenshot
2

Go to widget -> Generate

Step 2 screenshot
3

Click on create new

Step 4 screenshot
4

Select Bot

Select the bot that you want to use for your widgetStep 3 screenshot

​
General setup

1

Add Domain

You have 3 options while you select the domain:
  1. Enter specific domain: For eg: https://www.usefini.com - when you do this your widget will only work on the selected website.
  2. Enter partial domain : For eg: *.usefini.com - you can choose this when you want to use the widget across differents parts of your product (eg: app, website etc.)
  3. Enter “null”: when you want your widget to work across domains you can enter “null” and then you can deploy it across domains Step 20 screenshot
2

Select widget title

Step 21 screenshot
3

Insert Widget Description

Step 22 screenshot

​
Replies setting

1

Add Welcome message

This is the message your users will see when they open the widget Step 8 screenshot
2

Add pre-defined questions

It’s an optional step. If you foresee common questions among your users you can make it easier for them by adding pre-defined questions Step 9 screenshot

​
Branding

In this section you can decide on the appearance of your widget including logo and color. Step 10 screenshot
1

Show reference links

Select if you want to show the reference links used by the bot to generate it’s response. Note: We will only show public links. Step 14 screenshot
2

Select your brand color

Step 13 screenshot
3

Upload your logo

Step 23 screenshot
4

Click on create

Step 16 screenshot
5

Go back to Settings

Step 17 screenshot
6

Adjust streaming

Streaming is a feature that allows users to enjoy a more natural, human-like experience by streaming words in the response, rather than receiving the entire reply all at once.Please note that this functionality can impact Fini’s performance, potentially leading to a decrease in the accuracy of the replies since we turn off additional features like LLM evaluation while streamingStep 18 screenshot
7

Click on save

Step 19 screenshot

​
Review widget configuration

1

Click on Preview -> Widget

Preview your widget and make any adjustment if needed Step 14 screenshot
2

Select widget

Click on the logo in the right bottom side of the website Step 15 screenshot

​
Deploy widget

1

Select Embed Script

Step 24 screenshot
2

Copy code

Copy and paste this script to the HTML file of your website. Must put the snippet inside or after the body tag!
Finiwidget.html

  <script>
      (function (w, d, s, o, f, js, fjs) {
        (js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
        js.id = o;
        js.src = f;
        js.async = 1;
        fjs.parentNode.insertBefore(js, fjs);
        js = d.createElement("div");
        js.id = "fini-widget-root";
        d.body.appendChild(js);
        w.finiWidgetOptions = {
          widgetId: "xxxxxxx",
          mode: "widget",
          customerToken: "YOUR_JWT_TOKEN" // optional 
        };
      })(window, document, "script", "FiniWidget", "https://storage.googleapis.com/fini-widget/assets/fini-widget-prod.min.js");
  </script>

​
User Authentication (Optional)

If you want to identify and authenticate users in your widget, you can implement JWT-based authentication. This allows you to track conversations by user and provide personalized experiences.
1

Understand the authentication flow

User authentication with Fini widget works by passing a JSON Web Token (JWT) to the widget script. This token securely identifies your users and allows you to:
  • Track conversations by specific users
  • Provide personalized responses
  • Maintain conversation history per user
  • Access user-specific analytics
2

Generate a JWT token

Create a JWT token on your backend using the Fini signing key. Important: Never expose this signing key in your frontend code.Signing Key:
    xxxxx
Required JWT Payload:
    {
      "email": "[email protected]",      // Required - User's email address
      "name": "John Doe",                // Optional - User's display name
      "user_attributes": {               // Optional - Custom user metadata
        "userId": "12345",
        "accountType": "premium",
        "customField": "value"
      }
    }
The email field is required. The name and user_attributes fields are optional but recommended for better user tracking and personalization.
3

Pass the JWT to the widget

Once you have generated the JWT token on your backend, pass it to the widget via the customerToken parameter:
    <script>
      (function (w, d, s, o, f, js, fjs) {
        (js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
        js.id = o;
        js.src = f;
        js.async = 1;
        fjs.parentNode.insertBefore(js, fjs);
        js = d.createElement("div");
        js.id = "fini-widget-root";
        d.body.appendChild(js);
        w.finiWidgetOptions = {
          widgetId: "YOUR_WIDGET_ID",       // Replace with your actual widget ID
          mode: "widget",                    // Options: "widget" | "standalone"
          customerToken: "YOUR_JWT_TOKEN"    // Add the JWT token here
        };
      })(window, document, "script", "FiniWidget", "https://storage.googleapis.com/fini-widget/assets/fini-widget-prod.min.js");
    </script>
Security Best Practice: Generate the JWT token on your server-side and pass it to your frontend. Never include the signing key in your client-side code as this would compromise the security of your authentication system.
4

Implementation example

Here’s a typical flow for implementing authenticated widgets:
  1. Backend: When a user logs into your application, generate a JWT token using the signing key
  2. Frontend: Receive the token from your backend API
  3. Widget: Pass the token to the customerToken parameter in the widget initialization script
  4. Fini: The widget validates the token and associates all conversations with the authenticated user
Example backend pseudocode:
    // Backend - Generate JWT
    const jwt = require('jsonwebtoken');
    const signingKey = 'xxxxx'; // You can fetch this from the widget configuration 
    
    const payload = {
      email: user.email,
      name: user.name,
      user_attributes: {
        userId: user.id,
        accountType: user.accountType
      }
    };
    
    const token = jwt.sign(payload, signingKey);
    // Send this token to your frontend
If you don’t need user authentication, you can skip this section entirely. The widget will work without the customerToken parameter, but conversations won’t be associated with specific users.
Fini Widget set up is complete. If you wish to change some of the settings go back to the Deploy Page and edit your configurations in the settings tab
For any additional configurations or queries, reach out to [email protected]