STEP-BY-STEP GUIDE TO CUSTOMIZING BOLAGILA LIVE CHAT FOR YOUR BRAND
You installed Bolagila Live Chat. Now what? A default chat widget screams “generic” and blends into the noise. Your brand deserves better. This guide walks you through every customization option—colors, text, behavior, even advanced triggers—so your chat feels like a natural extension of your site. No fluff, no guesswork. Let’s make it yours.
—
GET STARTED: ACCESS THE DASHBOARD
Log into your Bolagila account. Click the gear icon in the top-right corner. This opens the admin dashboard. On the left sidebar, find “Widget Settings.” This is your control center. Bookmark it. You’ll return here often.
—
STEP 1: BRAND COLORS THAT MATCH YOUR PALETTE
Bolagila’s default blue clashes with most brands. Fix it fast.
Under “Widget Settings,” select “Appearance.” You’ll see a color picker for the chat header, message bubbles, and buttons. Use your brand’s primary hex code for the header. For message bubbles, pick a secondary or accent color. Buttons should stand out—use a contrasting color that still fits your palette.
Pro tip: Test on both light and dark backgrounds. Bolagila lets you preview changes in real-time. If your site uses a dark theme, invert the colors. White text on dark bubbles works better than black on dark.
—
STEP 2: CUSTOMIZE THE CHAT WIDGET TEXT
Default text like “How can we help?” feels robotic. Rewrite it to sound human.
In “Widget Settings,” click “Text & Language.” Here, you can edit every line of text the user sees: the welcome message, input placeholder, offline note, and even the “Send” button. Keep it concise. “Need help? We’re here.” beats “How may we assist you today?” every time.
For the offline message, add a fallback. “We’re offline, but email us at [email protected].” Include a link to your contact page. Bolagila supports HTML in these fields, so use it.
—
STEP 3: UPLOAD YOUR LOGO AND FAVICON
A chat widget without your logo is a missed opportunity. Add it.
Under “Appearance,” scroll to “Logo & Favicon.” Upload a square PNG of your logo. Keep it under 100×100 pixels for best results. The favicon appears in browser tabs when the chat is open. Use a 16×16 or 32×32 PNG.
Pro tip: If your logo has text, simplify it. Small spaces demand clarity. A stylized icon or monogram works better than a full wordmark.
—
STEP 4: ADJUST WIDGET POSITION AND BEHAVIOR
Where the chat widget sits affects engagement. Bolagila lets you move it.
In “Widget Settings,” select “Position.” You can place it in any corner: bottom-right (default), bottom-left, top-right, or top-left. Bottom-right is safest for most sites. If your site has a left sidebar, try bottom-left to avoid overlap.
Next, tweak “Behavior.” Decide if the widget should open automatically after a delay. Set it to 5-10 seconds for high-intent pages (pricing, checkout). Disable auto-open on blog posts—it’s intrusive.
—
STEP 5: SET UP CUSTOM TRIGGERS FOR PROACTIVE CHAT
Don’t wait for users to start the conversation. Bolagila’s triggers let you engage first.
Go to “Triggers” in the sidebar. Click “Add Trigger.” Name it something descriptive, like “Pricing Page – 30s.” Set the conditions: URL contains “/pricing” and time on page is 30 seconds. For the message, write: “Questions about our plans? I can walk you through them.” Keep it helpful, not pushy.
Test triggers on different devices. Mobile users scroll faster—adjust delays accordingly.
—
STEP 6: CUSTOMIZE AGENT AVATARS AND NAMES
Agents should feel like real people, not bots.
In “Widget Settings,” click “Agent Profiles.” Upload a photo for each agent. Use a friendly, professional headshot. For names, use first names only—”Sarah” builds rapport faster than “Sarah Johnson.”
If you have a small team, assign agents to specific triggers. For example, sales queries go to “Alex,” support to “Jamie.” Bolagila lets you route chats based on keywords or page URLs.
—
STEP 7: ADD CUSTOM FIELDS TO PRE-CHAT FORMS
Pre-chat forms filter out tire-kickers. Bolagila lets you customize them.
Under “Widget Settings,” select “Pre-Chat Form.” Enable it if you want to collect info before the Bolagila Situs starts. Add fields like “Name,” “Email,” and “Order Number.” For e-commerce, include “Product of Interest” as a dropdown.
Keep it short. Three fields max. Every extra field drops completion rates by 10%. Use placeholder text to guide users: “e.g., #12345” for order numbers.
—
STEP 8: STYLE THE CHAT WINDOW WITH CUSTOM CSS
Bolagila’s default styling is clean but basic. For pixel-perfect control, use custom CSS.
In “Widget Settings,” click “Advanced.” Paste your CSS in the provided box. Target specific elements like the chat header (.bolagila-header) or message bubbles (.bolagila-message). Example:
.bolagila-header {
background-color: #2a5c8a !important;
font-family: ‘Helvetica Neue’, sans-serif !important;
}
.bolagila-message {
border-radius: 12px !important;
}
Test changes in multiple browsers. CSS overrides can break layouts if not done carefully.
—
STEP 9: INTEGRATE WITH YOUR CRM OR HELP DESK
Bolagila chats should sync with your existing tools. Don’t let data sit in a silo.
Go to “Integrations” in the sidebar. Bolagila supports Zapier, which connects to 3,000+ apps. Set up a Zap to push chat transcripts to Slack, HubSpot, or Zendesk. For direct integrations, check if your CRM is listed. If not, use Bolagila’s API to build a custom connection.
Pro tip: Tag chats in your CRM. Use labels like “Sales Inquiry” or “Support – Urgent” to prioritize follow-ups.
—
STEP 10: TEST, ITERATE, AND OPTIMIZE
Customization isn’t a one-time task. Test everything.
Open your site in incognito mode. Does the widget load fast? Are colors consistent? Does the auto-trigger fire at the right time? Use Bolagila’s built-in analytics to track engagement. If open rates are low, tweak the welcome message or delay.
A/B test different versions. Try a green button vs. a blue one. Keep the winner, discard the loser. Small changes add up.
—
FINAL CHECKLIST: DID YOU DO IT