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 widget

Step 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 streaming

Step 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

3

Review branding

Here you can check Bot’s title, logo, widget description and welcome message. Step 16 screenshot

4

Review pre-defined questions

Here you can see predefined questions Step 17 screenshot

5

Review answers

Select a predefined question or type in your own and press send Step 18 screenshot

6

Review answer quality

You can assess the quality of reply by clicking thumbs up or down. These results you can track in the analytics tab in Fini Step 20 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: "yNYoJYuGMW",
          mode: "widget" 
        };
      })(window, document, "script", "FiniWidget", "https://storage.googleapis.com/fini-widget/assets/fini-widget-prod.min.js");
  </script>
  

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 hello@usefini.com