The AI Growth Widget lets you add a customizable chat widget to your website, so visitors can engage with your business and reach you through supported messaging channels.

This guide walks you through how to create and set up an AI Growth Widget—from branding and engagement settings to installing it on your website and confirming it’s working correctly. By the end of the setup, your widget will be ready to go live and interact with visitors.

Accessing the AI Growth Widget setup page

You can follow the steps below to access the AI Growth Widget setup page:

1. Go to the “Channels” page by clicking on the icon in the left navigation bar
2. In the “Channels” page, click on “AI Growth Widget” in the left-sided panel
3. You will be redirected to the AI Growth Widget landing page
   
4. To create your AI Growth Widget, click “Start setup” to begin

Step 1: Branding and basic settings

This step lets you customize how your AI Growth Widget looks and how it appears to visitors on your website. You’ll define your brand identity, default messaging, and language settings.

Customize brand identity

Under Brand identity, configure the visual and display elements of your widget. These settings control how the widget appears on your website and how your business is represented in conversations.

• Company logo
  
  • Upload a logo to represent your brand. This logo appears on the widget’s welcome screen and is also used as the responder’s avatar in chat conversations.
     
• Button color
  
  • Choose the color used for the widget button and primary call-to-action elements. This helps the widget visually align with your website’s branding.
    • Click on the icon to select a color, or enter the HEX color code directly
       
• Message bubble color
  
  • Set the color used for message bubbles in the chat window. This affects how messages appear during conversations with visitors.
    • Click on the icon to select a color, or enter the HEX color code directly
       
• Live chat display name
  
  • Enter the name shown to visitors as the widget title. This is typically your company or product name and helps visitors identify who they’re chatting with.
     
• Sender display name
  
  • Define the name shown as the message sender in chat. This is the name visitors will see for responses sent through the widget.
     
• Welcome message
  
  • Enter the default message shown when a visitor starts a chat on a page that doesn’t have a pop-up message configured. This message sets the tone for the conversation and encourages visitors to engage.

Configure language settings

Under Language settings, choose the languages your AI Growth Widget supports. These settings determine which language version of the widget is shown to visitors.

• Primary language
  
  • Choose the default language for your widget. This language is used when a visitor’s browser language isn’t supported.
    • Click the dropdown to select a language.
       
• Additional languages
  
  • Add more languages to provide a localized experience for visitors
    • Click “Add” to include additional supported languages.
    • Visitors will see the widget in a supported language that matches their browser settings. If no match is found, the primary language is used.

Step 2: Engagement and channels

In this step, you’ll define how visitors engage with your AI Growth Widget. This includes setting up pop-up messages, deciding whether to collect visitor contact details, and choosing which external messaging channels visitors can use to contact your business.

Configure Pop-up message

Under Pop-up message, you can create a short message that appears on your website to greet visitors and encourage them to start a conversation.

• Message name
  • Enter a name to help you identify this pop-up message. This name is for internal reference only and isn’t shown to visitors.
• Message content
  • Enter the message shown to visitors when the pop-up appears. This message should be short and engaging, and is limited to 500 characters.
• Display timing
  • Choose how long to wait before showing the pop-up message after a visitor arrives on the page.
  • Enter a number to set the delay in seconds. For example, if you enter 3, the pop-up message appears 3 seconds after a visitor lands on the page.
  • This delay applies to each page visit where the pop-up message is enabled.

Configure the “Collect customer data” settings

Enable Collect customer data if you want visitors to provide their contact information before starting a conversation.

When this option is turned on, visitors must enter the required details before they can continue chatting through the widget.

You can choose which information to collect:

• Phone number is required: Visitors must enter a valid phone number before starting a conversation.
• Email address is required: Visitors must enter a valid email address before starting a conversation.

You can enable either one or both options, depending on the information you want to collect.

Configure External messaging channels (optional)

External messaging channels let visitors contact your business through supported messaging platforms instead of continuing the conversation inside the widget.

Only channels that are already connected in your workspace can be enabled and shown to visitors.

For each channel, you can:

• Select a connected channel account (where applicable)
• Toggle the channel on or off to control whether it appears on the widget

When enabled, these channels appear as alternative contact options on the widget, allowing visitors to choose how they want to reach your business.

Step 3: Deploy

In this step, you’ll install the AI Growth Widget on your website and verify that it’s working correctly before finishing setup.

Install and deploy the widget on your website

Follow the on-screen instructions to install the widget:

1. Go to your website
   1. Log in to your website platform and open the code editor.
2. Insert the code snippet
   1. Copy the code snippet shown and paste it into your website’s code.
   2. To display the widget on specific pages, paste the snippet before the closing </body> tag on those pages.
   3. To display the widget across all pages, add the snippet to your global header or footer.
3. Save and refresh your website
   1. Save your changes and refresh your website. The widget should now appear.
4. Test the widget
   1. Send a test message through the widget to confirm it’s connected to SleekFlow.

Verify your installation

After installing the widget, confirm that it’s set up correctly:

1. Enter the URL of the page where you installed the widget
2. Click “Verify installation”
3. Review the verification result

If verification succeeds

• You’ll see a confirmation that the widget installation was successful
  
• Click “Done” at the bottom right corner to complete setup and make your widget live.

If verification fails

• You’ll see a message indicating that the installation couldn’t be verified.
  
• Review the troubleshooting guidance provided and check that:
  • The code snippet is installed on the correct page or domain
  • Your website changes have been published
  • The widget script isn’t blocked by content security policies or ad blockers