Introduction
ellocharlie's marketing chat feature enables businesses to embed a live chat experience directly on their websites. Website visitors can initiate conversations without leaving the site; these chats appear in the ellocharlie portal where your team members manage, respond to, and track visitor engagement. The widget is fully white-labeled, respecting your brand colors, logo, and company name.
How It Works
The marketing chat is delivered as a lightweight embedded JavaScript module. Website owners include a simple script tag on their site with tenant and configuration parameters. The widget initializes an iframe that connects to the ellocharlie backend, loads your branding context, and establishes a persistent chat session. Visitor messages flow into the ellocharlie backend where they're stored and surfaced to team members via the main portal interface.
Chat state is managed through the ellocharlie application and accessible via modal dialogs and sidebar panels integrated into the main portal. Chat conversations are associated with visitor metadata (IP, referrer, browser info where available), and chat history is persistent — past conversations can be searched and reviewed.
Usage Guide
For Website Owners (Embed)
Step 1: Get Your Embed Script
Your marketing chat embed script is available in your ellocharlie tenant configuration. The script includes your unique tenant ID and can be customized with your brand colors.
Step 2: Add the Script to Your Website
Include the marketing chat script on your website by adding the following code to your HTML, typically in the footer or before the closing </body> tag:
<script
src="https://your-ellocharlie-domain/embed/chat.js"
data-tenant="your-tenant-id"
data-color="#0066cc"
data-container="chat-widget">
</script>
<div id="chat-widget"></div>
Step 3: Configure Embed Parameters
The embed script accepts the following optional and required parameters:
data-tenant(required): Your unique ellocharlie tenant ID. This ensures conversations are routed to your account.data-color(optional): A hex color code for branding the widget to match your website's visual identity (e.g.,#0066cc).data-container(optional): The ID of the target DOM element where the chat widget will appear. If not specified, the widget will look for a div with the default ID.data-height(optional): The iframe height in pixels. Set this to a reasonable value to ensure proper display on your page.
Step 4: Test the Widget
Once the script is added, refresh your website and verify that the chat widget appears in the designated location. Test the chat functionality by sending a message and confirming it appears in your ellocharlie portal.
For Support and Sales Teams (Portal)
Accessing Chat Conversations
Chat conversations appear as a dedicated section or panel within the ellocharlie portal. Navigate to the chat or messaging area to view all active and past conversations.
Viewing and Responding to Messages
View Active Chats: See a list of all active chat sessions with visitor names and timestamps.
Read Messages: Click on a chat to view the full conversation history with timestamps for each message.
Send Replies: Type your response in the message input field and send it. Your reply will appear in the visitor's chat widget in real time.
Converting Chats to Business Opportunities
From the chat interface, you can create contacts, deals, or tickets directly from a conversation:
Open the chat conversation.
Look for options to create a new contact, deal, or ticket.
ellocharlie will link the chat history to the newly created record, preserving the conversation context.
Searching and Reviewing Past Conversations
Use the search functionality in the chat section to find past conversations by visitor name, email, or message content. All chat history is persistent and available for review.
Best Practices for Website Visitor Engagement
Responsive Design
Test the chat widget on both mobile and desktop devices. The embed script handles responsive sizing automatically. Set data-height to a reasonable value (e.g., 400–600 pixels) and ensure the container div doesn't overflow its parent element. This prevents layout issues and ensures a smooth user experience across all devices.
Brand Consistency
Use your exact brand color hex code in the data-color parameter to match your website's visual identity. Ensure your ellocharlie tenant is configured with the correct logo and company name so it appears in the widget header. Consistent branding builds trust and reinforces your company identity.
Prompt Availability
Monitor active chats in the ellocharlie portal regularly. Visitors are more likely to engage if they see prompt responses. Set expectations for response times in your chat widget greeting message (if available) or on your website, such as "We typically respond within 2 hours during business hours."
Strategic Placement
Position the chat widget in a visible but non-intrusive location on your website — typically the bottom-right corner is standard. Avoid placing it where it blocks important content or calls-to-action.
Visitor Context
Use the visitor metadata (IP, referrer, browser info) available in the chat record to personalize your responses. Knowing which page a visitor came from or what they were viewing helps you provide more relevant assistance.
Follow-Up Process
After a chat ends, create a contact or deal record in ellocharlie to ensure follow-up. This keeps the conversation context and allows your team to continue nurturing the lead through other channels.
FAQ
Q: What information is captured about website visitors? A: ellocharlie captures visitor metadata including IP address, referrer URL, and browser information where available. This context appears in the chat record and helps your team understand the visitor's journey.
Q: Can I customize the appearance of the chat widget?
A: Yes. You can customize the widget's color using the data-color parameter with a hex code. The widget also displays your ellocharlie tenant's logo and company name, so ensure those are configured correctly in your account settings.
Q: How do I change the size of the chat widget on my website?
A: Use the data-height parameter in the embed script to set the iframe height in pixels. Test different heights on your website to find the best fit for your layout.
Q: Are chat conversations stored permanently? A: Yes. Chat history is persistent in ellocharlie. You can search and review past conversations at any time.
Q: Can I create a contact or deal from a chat conversation? A: Yes. From within a chat conversation in the ellocharlie portal, you can create a new contact, deal, or ticket. ellocharlie will link the chat history to the newly created record.
Q: What happens if my team doesn't respond to a chat immediately? A: The visitor's message is stored in the ellocharlie portal and remains available for your team to respond to later. There is no automatic timeout, but you should set visitor expectations about response times on your website.
Q: Can I use the marketing chat on multiple pages of my website? A: Yes. Include the same embed script on any page where you want the chat widget to appear. All conversations will be routed to the same ellocharlie account.
Q: Is the chat widget mobile-friendly?
A: Yes. The embed script handles responsive sizing automatically. Test the widget on mobile devices and adjust the data-height parameter if needed to ensure a good user experience.