# Widgets

For  your bots, you can set some widgets to quickly start talking to the bot. To setup:

1. go "Tools" from the left sidebar
2. click "Widgets"
3. "+ New Widget"

<figure><img src="https://2144409983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHbDmB8MlZRo4hzrDiO0X%2Fuploads%2F1LhdUkPAbVRYognIScOm%2FCleanShot%202025-08-26%20at%2012.31.13.png?alt=media&#x26;token=e3e6dfef-0991-454f-a4ed-7f9ecad03dcd" alt=""><figcaption></figcaption></figure>

### Chatbot Ref URL Widget <a href="#messenger-ref-url-widget" id="messenger-ref-url-widget"></a>

<figure><img src="https://2144409983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHbDmB8MlZRo4hzrDiO0X%2Fuploads%2FjXUi44APBti6iIoVHHQg%2FCleanShot%202025-08-26%20at%2012.33.41.png?alt=media&#x26;token=04fa759d-4ec8-4aef-a7f0-bf6fca4467f6" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2144409983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHbDmB8MlZRo4hzrDiO0X%2Fuploads%2FwcRGEqAw4AXTySEqxIhC%2FCleanShot%202025-08-26%20at%2012.57.47.png?alt=media&#x26;token=131aa585-cd22-4050-8b6b-1ccaf09a33fc" alt=""><figcaption></figcaption></figure>

1. put a widget name
2. choose a sub flow the link goes to

(leave 3 and 4 blank if no reference is needed)

3. put a parameter name
4. assign a custom user field

What does the Ref parameter do?

For instance, you make a chatbot ref URL to your main flow, so that by visiting this URL, your users can start talking to your bot.

However, you would like to gather more information from the link, like where did your users get the link? In this case, you can put "source" in area 3 and a variable to store the source at area 4 in the above picture.

Later, add a source name in your link according to where do you put it. This is how you get extra information from the link.

After filling in all the information, click "Save" and click the pencil to edit this widget, you will see a unique URL generated for this widget:

<figure><img src="https://2144409983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHbDmB8MlZRo4hzrDiO0X%2Fuploads%2FVMyUpN37Qx5gVKVMM2L8%2FCleanShot%202025-08-26%20at%2013.09.28.png?alt=media&#x26;token=fd50f369-c7c4-43bb-b904-f9bf59504a7b" alt=""><figcaption></figcaption></figure>

So here, by visiting any of the following links, your users can start talking to your bot:

| **example link**                                                                                                                                        | **value in variable "source"** |
| ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ |
| <https://app.rapidbott.cloud/p/web/r6x5larsmehu1wqu/full?ref=Source>                                                                                    |                                |
| <https://app.rapidbott.cloud/p/web/r6x5larsmehu1wqu/full?ref=Source>[--advertisement](https://m.me/102942588321862?ref=source--advertisement)           | advertisement                  |
| <https://app.rapidbott.cloud/p/web/r6x5larsmehu1wqu/full?ref=Source>[--shared\_by\_users](https://m.me/102942588321862?ref=source--shared_by_users)     | shared\_by\_users              |
| <https://app.rapidbott.cloud/p/web/r6x5larsmehu1wqu/full?ref=Source>[--promoted\_by\_sales](https://m.me/102942588321862?ref=source--promoted_by_sales) | promoted\_by\_sales            |

Yes, you might notice that by adding "--xxx" after the link, the value "xxx" will be transferred to the bot.

### QR Code Widget <a href="#qr-code-widget" id="qr-code-widget"></a>

URL links are convenient to click via electronic way while QR codes are more suitable for on-site use. By scanning a QR code, your users can start talking to your bot.

<figure><img src="https://2144409983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHbDmB8MlZRo4hzrDiO0X%2Fuploads%2FAnxnEyoyrTZvWDrPsnNT%2FCleanShot%202025-08-26%20at%2013.17.47.png?alt=media&#x26;token=18e91c86-9b20-482f-959b-677436873bb4" alt=""><figcaption></figcaption></figure>

To setup:

1. give a widget name
2. select a sub flow
3. upload your logo image
4. adjust image size if needed
5. adjust color if needed
6. adjust dot scale if needed
7. click "Generate" to get an image on the right. Repeat step 4, 5 and 6 to get a final image
8. download your QR code, print it and put it in your store, restaurant, office, etc

### Customer Chat Widget <a href="#customer-chat-widget" id="customer-chat-widget"></a>

This widget is to be embedded on your website, so that your website can have a bot serving users as [Rapidbott Website](https://rapidbott.com/) do:

<figure><img src="https://2144409983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHbDmB8MlZRo4hzrDiO0X%2Fuploads%2Fko0mV2dB9v5WK700AiNs%2FCleanShot%202025-08-26%20at%2013.46.10.png?alt=media&#x26;token=539e273c-fa1d-4ec6-9972-26fafcac97dd" alt=""><figcaption></figcaption></figure>

To setup:

1. give a widget name
2. select a sub flow
3. adjust theme color if needed
4. adjust greeting message which will be shown above the "Continue as xx" button (see in the previous picture).
5. select a display type
6. adjust the delay if the second or the third display type is selected
7. for payload, see explanation in [Chatbot Ref URL](#messenger-ref-url-widget) above.

Click "Save" after finishing all the settings, again, click the pencil to edit this widget and you will see this button:

<figure><img src="https://2144409983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHbDmB8MlZRo4hzrDiO0X%2Fuploads%2FCHvoIyqt7cjIvuuRtsM8%2FCleanShot%202025-08-26%20at%2013.51.06.png?alt=media&#x26;token=d8263906-1b9f-4e16-8256-9e825d721343" alt=""><figcaption></figcaption></figure>

Click it.

<figure><img src="https://2144409983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHbDmB8MlZRo4hzrDiO0X%2Fuploads%2F0KmYhqQELhQZkH1Ap6XO%2FCleanShot%202025-08-26%20at%2013.53.01.png?alt=media&#x26;token=ec23f21a-0af5-491f-aaf4-6fd642b4e2d0" alt=""><figcaption></figcaption></figure>

Add the websites that you want to put this bot at. Then install the snippet by copying and pasting the code.

Perfect! 😎 You got a bot on your website now.

### Chat Buttons <a href="#chat-buttons" id="chat-buttons"></a>

#### **Configuring the "Powered By" Feature on Rapidbott Chat Button Widget** <a href="#configuring-the-powered-by-feature-on-uchat-chat-button-widget" id="configuring-the-powered-by-feature-on-uchat-chat-button-widget"></a>

Here are the steps to add a custom "Powered By" text and URL link to your chat widget on Rapidbott. This feature allows you to include a custom signature or link in the footer of the chat widget.&#x20;

**Please note:** This feature only applies to the **Button Widget** and does not work with the **WebChat Widget**.

**Key Differences:**

* **Button Widget**: Redirects users to a specific channel of communication when clicked. The "Powered By" text in the Button Widget can be customized starting from the **Business Plan**. For example:

<figure><img src="https://2144409983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHbDmB8MlZRo4hzrDiO0X%2Fuploads%2FOXRlEEc3ETVU1zMUmRz4%2F80578.png?alt=media&#x26;token=440809c1-9d8a-46bf-ad77-2a6bbed44ed8" alt=""><figcaption></figcaption></figure>

**Step-by-Step Guide**

1. **Access the Widgets Menu**
   * In the Rapidbott dashboard, go to the left sidebar and select **Widgets**.
2. **Create a New Widget**
   * Click on **+ New Widget** in the top right corner.
   * Choose the **Chat button** option from the dropdown menu.

<figure><img src="https://2144409983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHbDmB8MlZRo4hzrDiO0X%2Fuploads%2F70tiATmwvxpHVClZBHQN%2FCleanShot%202025-08-26%20at%2014.18.20.png?alt=media&#x26;token=39906a7a-aa7c-4d5b-9a95-9f5a5ba3b773" alt=""><figcaption></figcaption></figure>

3. **Name the Widget**

   * In the **Add New Widget** screen, enter a name for your widget in the **Name** field, then click **Save**.

   <figure><img src="https://2144409983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHbDmB8MlZRo4hzrDiO0X%2Fuploads%2FggUaIrJaIAVUHs7PmlKU%2F65762.png?alt=media&#x26;token=b1b92171-53e3-420d-b4e7-146c2a0f5957" alt=""><figcaption></figcaption></figure>

4. **Edit the Widget**
   * After creating the widget, locate it in the widget list and click on the **Edit** icon (pencil icon) next to the widget you want to configure.

<figure><img src="https://2144409983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHbDmB8MlZRo4hzrDiO0X%2Fuploads%2FBv6MJ5s9hDKL58QFTMuC%2FCleanShot%202025-08-26%20at%2014.20.46.png?alt=media&#x26;token=f4edc49c-3ad8-436e-86a9-f59b729abd27" alt=""><figcaption></figcaption></figure>

5. **Set Up "Powered By"**
   * In the widget settings editor, you will see customization options.
   * Find the fields labeled **Powered By** and **Powered By URL**:

     * **Powered By**: Enter the text you want to display as "Powered By." This text will appear at the bottom of the chat widget.
     * **Powered By URL**: Enter the link to which the user will be directed when they click on the "Powered By" text. This link can lead to your website, a contact page, or any URL of your choice.

     <figure><img src="https://2144409983-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHbDmB8MlZRo4hzrDiO0X%2Fuploads%2Fk3eKDcvZct7k1QfFZ2NA%2FCleanShot%202025-08-26%20at%2014.25.04.png?alt=media&#x26;token=36433587-62c4-4067-bd64-7f78cb8fe52c" alt=""><figcaption></figcaption></figure>
6. **Save Settings**
   * After configuring the "Powered By" text and URL, click **Save** to apply the changes to the chat widget.

These steps will set up the "Powered By" text with a link in your widget, providing a personalized experience for users interacting with the chat on your site.