---
description: Create and manage widgets that can be embedded on your website so site visitors can contact you via your preferred channel(s).
title: Growth Widgets
image: https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F3f43c48b21b24f4e8b02b100c0c8fab0
---

[New🌍 WhatsApp API Calling is now available globally! Start making calls with respond.io today. Learn more![arrow-icon](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2Fe43213a7a9314673bd8d2060c25f9b87)](/whatsapp-business-calling-api)

Help me with... ⌘ 

1. [All Collections >](/help)
2. [ Product >](/help/product)
3. [ Workspace Settings >](/help/workspace-settings)
4. Growth Widgets

# Growth Widgets

![Avatar](https://assets2-proxy.respond.io/ph8r57dk1q9w/4GvzCieeTBRY4TRJUbIr4y/b92428e6b049d23f546269180534f7ea/Ryan_Tan_Avatar.svg)

Joshua Lim

· 04 Apr 2025

3 min read

A Growth Widget allows you to embed a single channel or multichannel widget on your website so visitors can connect with you via their preferred messaging apps.

> If you are looking to add a Website Chat Widget, learn more [here](https://respond.io/help/website-chat-widget/website-chat-widget-overview).

## Getting Here

> This setting is accessible by Owners and Managers only.

This setting can be accessed from the **Settings** navigation menu under the **Workspace Settings** sub-menu item, **Growth Widgets**.

Under the Growth Widget Settings section, you can see a list of existing widgets in your Workspace. Here, you can edit and manage these widgets or create new ones.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/57mm9I3T8Pi7UnYorlg6BA/eb93ab9123b0b352e6ce270e5ce0be09/workspaces-growthw.gif?fm=avif&w=1000) 

In this setting, you can:

* Create a widget
* Manage existing widgets
* Delete a widget

## Creating Widget

**Step 1:** Click the **Add Widget** button to explore all the available widgets.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/1cSEqRmlBANAYqqY5FntFL/da1d2cbc82153ef8a38e9d4dc0a1d524/workspaces-add-widget.png?fm=avif&w=1000) 

**Step 2:** Select the widget you would like to create > click the **Create Widget** button

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/2v1rbVsIBPfSndSWriVBe5/3b5fb7c19244b4bca71d4840d757063e/workspaces-createw.png?fm=avif&w=1000) 

> You can only select single-channel widgets if the Channel is connected to the Workspace.

### Configure Widget

Configure the selected widget according to the required fields.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/4TI7vQA9U7yvcO9RtuCgse/965118031034edb7a1d1bac374f8446d/workspaces-configurew.png?fm=avif&w=1000) 

#### Website Domains

Add website(s) where the Widget will be added in the Website Domains field. Here's how to whitelist websites:

* If the user adds `https://app.respond.io` , then only `https://app.respond.io` will be whitelisted. Any other subdomain or root should not work.
* If the user adds `https://*.respond.io` , then all subdomains including the root domain will be whitelisted.
* If the user adds `https://respond.io` , then only the root domain will be whitelisted.
![](https://assets2-proxy.respond.io/ph8r57dk1q9w/1MMSfFMgRphP35jCbBejTT/8e9eac0f58354013130396de3ecef3ec/websitedomain.gif?fm=avif&w=1000) 

#### Choose your Channels

Select the Channel you want to create a widget for from the dropdown list of available Channels.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/2BDzQ5y4lVIgvRau13PRrC/a818f134ff35c6794dc0b1b9d158f3d6/choosechannels.gif?fm=avif&w=1000) 

#### Advanced Settings

You may click the **Advanced Settings** button to further configure the optional fields.

* **Hover Text:** Display when hovering over the widget
* **Pre-filled Text (Optional):** Prefilled text before sending a message
* **Include current page URL:** Check this checkbox to include the current page URL in the pre-filled text

> The “include current page URL” feature is only available for WhatsApp, Viber, and email Channels.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/1MYLyLozRByTsjbDvrr1aM/8d0620e360d0b6f4535e4eedc610a138/workspaces-advanced-settings.png?fm=avif&w=1000) 

#### Install the Script

Copy the generated script to install it on your website and click the **Done** button. Alternatively, forward the installation instructions via email.

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/sEm4u6WmVilu3Xjfdz0Rv/d6541119d3f441855bb6fe315c1edcaa/growth-widgets-7.png?fm=avif&w=1000) 

> Refer [here to learn how to install the script on your website](https://respond.io/help/website-chat-widget/website-chat-widget#installing%5Fthe%5Fchat%5Fwidget).

> Click the Generate Widget button in the top right corner once done.

## Managing Widgets

Once you have created a widget, you can manage it as below.

### Open the Installation Code

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7liJXSQ6a8K0P0AvSlsVsL/00b273a27c309b4972c7d8aec6659876/installation-code.png?fm=avif&w=1000) 

To see or copy the installation code (script) of the created widget, click the **Installation Code** button and follow the instructions on the screen.

> This function is not applicable to the QR Code Generator.

### Download the QR Code

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/2Omh41BIWxCUyCKB5axLfa/f38aa08096e4eef8c0a450d62f374585/qr-code.png?fm=avif&w=1000) 

To download the generated QR Code, click the **Scan Code** button, then the **Download** button and select your desired pixel dimensions for your scannable code.

> This is only applicable to the QR Code Generator, not the other messaging widgets.

> For more information on how to utilize this feature, read our [blog article on using scannable codes here](https://respond.io/blog/facebook-messenger-code).

### Customizing the Widget

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7jpBHww29KHkVGZzWNuXJc/d671069da8e50bd7d8009e3b6ccc80f4/customize-widget.png?fm=avif&w=1000) 

To customize existing widgets, click the **Customize** button to open the customization page.

There are 5 sections you can customize depending on the type of widget:

#### **General**

You may configure the following general settings:

* **Widget Name:** Name used internally to identify the widget
* **Website Domains:** The websites on which the widget is to be installed. If you do not add your website to this list, your widget will not load. You can enter multiple URLs if you plan on installing the widget on multiple websites.

#### **Channels**

You may customize the following to define the behavior of the widget based on the selected channel:

* **Hover Text:** The hover text is shown in a tooltip when hovering over the widget.
* **Pre-Filled Text:** The pre-filled text is an input suggestion when a Contact starts a conversation.
* **Reference:** The reference will appear when a conversation is opened and allow you to track the source of the contact.
* **Colors:** Choose the channel icon’s background color and icon appearance in the widget.

#### **Display & Appearance**

You may customize the following to change the display appearance of the widget on your website:

* **Popup Message:** The popup message is shown to website visitors once per day 5 seconds after the page loads. If it is not defined, no popup message will appear.
* **Widget Size:** Choose from the Large, Standard or Small widget size.
* **Display Options:** Choose to display this widget on desktop, mobile devices or both.

#### **Position**

You may change the position of the widget on your website based on the following settings:

* **Alignment:** Specify if you would like to display the widget on the bottom left or right of the website.
* **Vertical Spacing:** Specify the amount of vertical spacing between the widget and the bottom of the screen.
* **Horizontal Spacing:** Specify the amount of horizontal spacing between the widget and the edge of the screen.

#### **Additional Settings**

Additional customization for widgets:

* **Hide Respond.io Branding:** Remove the respond.io branding from your widget.

## Deleting a Widget

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3DMqeOcw4oNk6tMo9n1tXQ/6fc0f30860447ebccfa8c7dd80a4d21c/delete-widget.png?fm=avif&w=1000) 

To delete an existing widget, click the **Delete** button and follow the instructions on the screen. Doing so will completely remove the widget from your Workspace.

> Be careful when deleting a widget from your Workspace. When a widget is deleted, all its configurations will be deleted. Deletion cannot be undone.

Share this article

[![Telegram](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F44daca77a4844f0c8fd29040ddeba057?width=22)](https://api.whatsapp.com/send?text=https://respond.io/help/workspace-settings/growth-widgets)[![Facebook](https://assets1-proxy.respond.io/api/v1/image/assets/11f7a662b80a4675973850b067c01fa5/fff57eeb01160bc604392f519b4f3461ca16f0fa1b6a587b20b142cdf1ad0ba7?placeholderIfAbsent=true&width=22)](https://www.facebook.com/sharer/sharer.php?u=https://respond.io/help/workspace-settings/growth-widgets)[![Linkedin](https://assets1-proxy.respond.io/api/v1/image/assets/11f7a662b80a4675973850b067c01fa5/7aaf8d87b5410844d83e06a4ed663e4f551b8c5ef51dbb20a8ff064a1eed9a0f?placeholderIfAbsent=true&width=22)](https://www.linkedin.com/sharing/share-offsite/?url=https://respond.io/help/workspace-settings/growth-widgets)[![Twitter](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F4e03e02422a94e8eab9b8b41457c2371?width=22)](http://twitter.com/share?url=https://respond.io/help/workspace-settings/growth-widgets)

## 

Related articles 👩‍💻

* [CallsLearn how to manage call configurations for your connected Call Channels. ](/help/workspace-settings/calls)
* [AI PromptsLearn how to set up and configure AI Prompts. ](/help/workspace-settings/ai-prompts)
* [AI AssistLearn how to set up and configure AI Assist. ](/help/workspace-settings/ai-assist)
* [LifecycleLearn how to track and manage Contacts throughout your sales process on our platform. ](/help/workspace-settings/workspace-settings-lifecycle)
* [Contact ImportLearn how to import, review, and manage data in the platform. ](/help/workspace-settings/data-import)

Can't find what you're looking for? 🔎

[Contact Support](/contact-us)

2025-12-05T03:58:30.540Z

help

```json
[{"@context":"https://schema.org","@type":"TechArticle","articleBody":"Create and manage widgets that can be embedded on your website so site visitors can contact you via your preferred channel(s).","author":{"@type":"Person","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/4GvzCieeTBRY4TRJUbIr4y/b92428e6b049d23f546269180534f7ea/Ryan_Tan_Avatar.svg","name":"Joshua Lim","url":"https://respond.io/author"},"dateCreated":"2025-01-28T04:11:59.000Z","dateModified":"2025-04-04T10:14:25.056Z","datePublished":"2025-01-28T04:11:59.000Z","headline":"Growth Widgets","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/57mm9I3T8Pi7UnYorlg6BA/eb93ab9123b0b352e6ce270e5ce0be09/workspaces-growthw.gif","mainEntityOfPage":"https://respond.io/help/workspace-settings","publisher":{"@type":"Organization","logo":"https://respond.io/favicon/favicon.svg","name":"respondio"},"thumbnailUrl":"https://assets2-proxy.respond.io/ph8r57dk1q9w/57mm9I3T8Pi7UnYorlg6BA/eb93ab9123b0b352e6ce270e5ce0be09/workspaces-growthw.gif","url":"https://respond.io/help/workspace-settings/growth-widgets"},{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Help","item":"https://respond.io/help","position":1},{"@type":"ListItem","name":"Product","item":"https://respond.io/help/product","position":2},{"@type":"ListItem","name":"Workspace Settings","item":"https://respond.io/help/workspace-settings","position":3},{"@type":"ListItem","name":"Growth Widgets","item":"https://respond.io/help/workspace-settings/growth-widgets","position":4}]}]
```
