# 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 
* 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="https://1745791824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAPDb8cKQtGlIAfgHjcsQ%2Fuploads%2FhMh3vU4UDl3IXLjqk3L7%2Fimage.png?alt=media&#x26;token=9c6ee03e-8f44-424c-8805-565e7df31eef" 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="https://1745791824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAPDb8cKQtGlIAfgHjcsQ%2Fuploads%2F37JmEZKmhE6yoJDqPFoz%2Fimage.png?alt=media&#x26;token=f46d66d2-1074-4437-9f78-9a16153e1901" 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="https://1745791824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAPDb8cKQtGlIAfgHjcsQ%2Fuploads%2FqEgfZhhXj7TfGz6b26lY%2Fimage.png?alt=media&#x26;token=a754bccc-7f20-4a39-baeb-e09de728ff2e" 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="https://1745791824-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAPDb8cKQtGlIAfgHjcsQ%2Fuploads%2FfFXSwjVuz5RORR1mJO3e%2Fimage.png?alt=media&#x26;token=9bf9cc6a-f4a1-4713-bd20-07e5385c00e7" 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>