When you first launch the app, you will complete the Initial Setup screen to choose your core chat structure and base theme.
Step 1: Choose Your Account Structure.
Select who will be managing the chat requests by choosing one of the three radio buttons:
Just me (one Instagram account): Best for solo owners.
My team (multiple accounts): Allows you to add multiple team members and separate routing.
Just a quick link to my Instagram DMs: A simple, lightweight redirect action.
Step 2: Pick a Visual Theme.
Choose a base color preset from the Light or Dark variations (such as Insta Glow, Violet Pop, or Royal Magenta) to instantly match your brand.
Step 3: Provide Your Handle.
Input your official account handle in the Your Instagram username text field.
Step 4: Launch the Editor.
Click the blue Start Building button to save your initial configurations and load the full dashboard.
Once inside the primary dashboard, you can fine-tune your app across six advanced setup tabs located on the left-hand panel.
Manage user experience behaviors and status logic:
Widget Display Logic: Toggle Multi Chat to allow visitors to pick from multiple Instagram accounts, or leave it off if routing directly to a single chat link.
User Attention: Adjust the Show new msg indicator switch to display a notification dot on the widget badge, drawing focus to active messaging.
Indicators & Popups: Use the Indicator behavior dropdown to determine how the badge behaves, preview the responsive chat bubble, or turn the Show Welcome Popup toggle on or off.
Offline Agents: Use the Hide offline agents setting to automatically hide specific team members when they are not scheduled or available.
Design the structural text, greetings, and labels across three layout sections:
Chat Tab: Customize your layout's core text by editing the Footer content field and modifying the call-to-action button string inside the Button Label input.
Badge Tab: Edit your floating text badge content.
Welcome Tab: Choose whether your introduction message uses your standard default welcome content (Use Agent Message) or a unique notification string via the Custom Message toggle.
Sound Alerts: Set the Notification Sound type (None, Belt, Pop, or Beep) and optimize the sound intensity slider bar under Volume Level.
Add and handle team parameters cleanly:
Click + Add New Agent, or edit an existing user module, to open the Edit Member window.
Member Details: Upload a custom profile picture, set a display name, and describe their business capacity in the Role field (e.g., Customer Support, Sales).
Instagram Details: Assign their specific username and insert localized greeting text in the Hello Message and Initial Message inputs.
Availability Rules: Click on individual weekday buttons and select an active timeframe window to determine their operating schedule.
Online Indicator: Pick your live badge display type (None, Hub Only, Text Only, or Both), and write custom text strings inside the Online Status Text and Offline Status Text fields.
Fine-tune your brand colors and visual styling:
General: Switch between beautifully pre-built theme palettes instantly.
Advanced Color Editing: Manually select targeted colors or enter hex codes for elements like the Notification Dot Color, Content Background Color, Content Border Color, Button Colors, and Text Colors.
Chat Background Image: Click Add Image to upload an accent asset or watermark to act as the decorative backing wall for the active chat area.
Control the physical dimensions and structural spacing of your widget on Desktop and Mobile device views:
General Layout: Use the Widget Max Width slider to set the overall horizontal footprint of the chat window, and adjust the Element Gap slider to control the spacing between individual components inside the widget.
Chat Layout: Customize the text legibility and corner styling within the main conversation box using the Font Size and Chat Border radius sliders.
Badge Layout: Fine-tune your floating chat bubble entry point by adjusting the Badge Font Size slider. Under Badge Border radius, enter custom values into the four individual corner inputs (top-left, top-right, bottom-left, bottom-right) to reshape the button, or click the blue lock icon to sync all corners uniformly.
Determine exactly where and on which pages your chat app functions:
Alignment: Select the Left or Right layout alignment button to anchor the widget to that specific corner of the screen.
Margins: Adjust the Margin Bottom and Margin Left/Right sliders to fine-tune spacing from your browser screen boundaries.
Visibility Rules: Choose the Display on all pages radio button for global site coverage, or select Display only on some page(s) to target specific paths or nested URL folders. ( When adding a path, use the page URL (the part of the URL that comes after your main domain). For example, if your Contact us page URL is my-site.com/contactus, enter /Contactus as the path and press Enter to add it. You can add multiple page paths in the same way.)
Step 1: Secure Your Changes
Click the Save link at the top menu of your configuration panel to ensure all active configurations are locked in.
Step 2: Push to Your Live Site
Click the blue Publish button to make the chat app live for your visitors.
Step 3: Test the Live Interface
Click Preview on Live Site on the confirmation prompt to see your floating chat bubble live. When your visitors interact with the widget and click the link, they will be seamlessly routed straight to your Instagram interface to start messaging!
