# Facebook Widgets

## Facebook Automation – Widgets

Widgets are **entry points** that help users start conversations with your Facebook Messenger bot from different channels such as websites, links, or QR codes.\
They are designed to **increase bot usage** and make it easier for users to connect with you.

***

### Accessing Facebook Widgets

To open the Widgets section:

* Log into your BotPenguin&#x20;
* Go to the all Bots
* Select Facebook Bot.
* Click on widgets from the expanded menu.

You will land on the **Manage Widgets** screen.

<figure><img src="/files/7vgeFSEhGMYN7goXEHV4" alt=""><figcaption></figcaption></figure>

***

### Manage Widgets – Overview

The **Manage Widgets** screen displays all available Facebook widgets that can be used to route users directly to your Messenger bot.

#### Available Widgets

* **Chatbot Icon**
* **Link**
* **QR Code**

Each widget can be expanded to view setup instructions and configuration options.

***

### Chatbot Icon Widget

The **Chatbot Icon** allows you to embed a Facebook Messenger chat icon directly on your website.\
Visitors can click the icon to instantly start a conversation with your bot.

#### How to Install the Chatbot Icon

1. Click on **Chatbot Icon**
2. Click **Copy Chatbot Code**
3. Paste the copied code into your website’s **header file**
4. Deploy the updated website code

Once installed, the chatbot icon will appear on your website.

> 📌 *Tip:* The icon typically appears at the bottom corner of your website for easy access.

<figure><img src="/files/lSQElxysAZ2OGvdN8gEe" alt=""><figcaption></figcaption></figure>

***

#### Editing the Chatbot Icon

If you want to customize the icon:

1. Click **Edit Icon**
2. Update icon appearance or behavior as needed
3. Save changes

You can preview the icon on the right side of the screen before publishing.

***

#### Need Help?

* Click **Need Help?** for guidance during setup
* Useful if you are unsure where to place the code on your website

***

### Link Widget

The **Link** widget generates a shareable URL that redirects users directly to your Facebook Messenger bot in a single click.

#### Use Cases

* Share in emails
* Add to social media posts
* Embed in buttons or landing pages

Once clicked, users are redirected to Messenger and connected to your bot instantly.

<figure><img src="/files/1PObqUENbly3RTo4BxDV" alt=""><figcaption></figcaption></figure>

***

### QR Code Widget

The **QR Code** widget allows users to scan a QR code and instantly open your Facebook Messenger bot.

#### Use Cases

* Offline marketing (flyers, posters, banners)
* Business cards
* In-store displays

Users simply scan the QR code using their mobile device to start a chat.

<figure><img src="/files/iGL3ZqBAZpP7JTN33gEo" alt=""><figcaption></figcaption></figure>

***

### Best Practices

* Use the **Chatbot Icon** for website engagement
* Use **Links** for digital campaigns and email marketing
* Use **QR Codes** for offline promotions
* Test each widget before sharing publicly

***

### Notes & Limitations

* Widgets redirect users to Facebook Messenger
* Facebook Messenger policies apply
* Internet connection is required for widget functionality

### FAQ's:

Here are some common FAQ's regarding Facebook Widgets:

<details>

<summary>Do I need technical knowledge to use Facebook Widgets?</summary>

Basic technical knowledge is required only for the **Chatbot Icon**, as it involves adding a code snippet to your website header.\
The **Link** and **QR Code** widgets require no technical setup.

</details>

<details>

<summary>Where should I place the Chatbot Icon code on my website?</summary>

The Chatbot Icon code should be pasted inside your website’s **`<head>` section** or header file.\
This ensures the widget loads properly across all pages.

</details>

<details>

<summary>Can I customize the Chatbot Icon?</summary>

Yes.\
Click **Edit Icon** to customize the appearance or behavior of the chatbot icon before deploying it on your website.

</details>

<details>

<summary>Why is the Chatbot Icon not appearing on my website?</summary>

Common reasons include:

* Code not added to the correct header section
* Website cache not cleared
* Website not redeployed after adding the code

Try refreshing the site or redeploying your website after installation.

</details>

<details>

<summary>What is the Link widget used for?</summary>

The **Link** widget provides a shareable URL that opens your Facebook Messenger bot instantly.\
It is ideal for:

* Emails
* Social media posts
* Landing pages
* CTA buttons

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.botpenguin.com/bots/facebook-bot/facebook-automation/facebook-widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
