Visual Webchat Editor

Modified on Thu, 28 Nov at 2:20 AM

Chatbot Builder AI's New Visual Editor for Webchat

Chatbot Builder AI is excited to introduce the Visual Editor for Webchat, a revolutionary tool that empowers users to customize their chatbot interfaces effortlessly. Say goodbye to complex coding and hello to an intuitive platform where you can adjust colors, fonts, layouts, and more to bring your chatbot's appearance to life.

Key Features of the Visual Editor

Real-Time Preview: Instantly see the effects of your customization changes, ensuring your chatbot looks exactly as you envision.
Comprehensive Customization: Modify a wide array of elements, including headers, chat areas, messages, avatars, icons, and input fields.
User-Friendly Controls: Utilize intuitive sliders, color pickers, dropdown menus, and text inputs to make adjustments effortlessly.
Generated CSS Output: Easily export your customized styles with a single click, facilitating seamless integration into your website or application.
Responsive Design: Ensure your chatbot maintains a polished appearance across all devices and screen sizes.

Getting Started with the Visual Editor

Access the Visual Editor: Log in to your Chatbot Builder AI dashboard and select the chatbot you wish to customize. Navigate to the "Settings" section and select the “Channels” tab and then select “Webchat” and click “Manage” to begin.
Explore Customization Sections: The editor is organized into various sections, including Header Settings, Chat Area Settings, Message Settings, Font Settings, Avatar Settings, Icon Settings, and Chat Input Settings. Click on each section to access the available customization options.
Adjust Settings: Use the provided controls—such as color pickers, sliders, dropdown menus, and text inputs—to modify your chatbot's appearance. As you make changes, the preview pane updates in real-time to reflect your adjustments.
Generate and Export CSS: Once satisfied with your customizations, navigate to the "Generated CSS" section. Here, you can view and copy the CSS code that corresponds to your settings for easy integration.
Save Your Configuration: After finalizing your customizations, save your settings to apply them to your live chatbot.

Tips for Effective Customization

Maintain Consistency: Use a consistent color scheme and font style throughout your chatbot to ensure a cohesive and professional appearance.
Enhance Readability: Choose font sizes and colors that improve readability. High contrast between text and background enhances user experience.
Align with Branding: Incorporate your brand's colors, logos, and preferred fonts to ensure your chatbot aligns with your overall brand identity.
Test Across Devices: Ensure your customized chatbot looks great on all devices by testing the interface on various screen sizes and resolutions.

Launcher and Icon Customization

Customizing the launcher and icons of your webchat can significantly enhance user experience and align the chatbot's appearance with your brand identity. The Visual Editor provides straightforward options to change both the chat bubble launcher and the icon inside it.

Example: Custom Chat Bubble Icon and Launcher Color

To implement a custom chat bubble icon and adjust the launcher color, you can use the following script example. This script includes a custom icon URL and a specified color for the launcher.

<script src="https://app.chatgptbuilder.io/webchat/plugin.js"></script> 
<script> ktt10.setup({    "pageId": "YOUR_PAGE_ID",    "headerTitle": "Your Chatbot Title",    "ref": "YOUR_REF",    "icon": "https://yourdomain.com/your-icon.png", // Custom icon URL    "color": "#YOURCOLOR", // Launcher color in hex code    "template": "template1" }); </script>

Replace "YOUR_PAGE_ID", "Your Chatbot Title", "YOUR_REF", "https://yourdomain.com/your-icon.png", and "#YOURCOLOR" with your actual values.

Auto-Open Webchat After a Specified Time

Engaging users promptly can enhance interaction rates. The setTimeout function allows you to automate the opening of the webchat after a specified interval. Here's how you can implement this feature to auto-open the chat window after 4 seconds:

<!-- Include the Chatbot Builder AI webchat script -->
<script src="https://app.chatgptbuilder.io/webchat/plugin.js?v=5"></script>

<!-- Initialize the webchat with your specific configurations -->
<script>
    ktt10.setup({
        id: "uxZ1a5Wvqj3TpqlgNaZ",  // Replace with your specific webchat ID
        accountId: "YOUR-ID-HERE",  // Replace with your actual account ID
        color: "#36D6B5"           // Customize the webchat's color
    });
</script>

<!-- Automatically open the webchat button after 4 seconds -->
<script>
    setTimeout(function() {
        ktt10Btn.click();
    }, 4000);
</script>

Explanation:

setTimeout Function: Delays the execution of a specified function by the given time (in milliseconds).
Auto-Open Action: Simulates a click on the chat launcher button after 4 seconds, causing the chat window to open automatically.
Customization: Adjust the timing by changing the value 4000 to your preferred number of milliseconds.

Benefits:

Immediate Engagement: Automatically opening the chat window captures the visitor's attention without requiring manual action.
Increased Interaction: Reduces friction for users to start a conversation, potentially increasing engagement and conversion rates.
Flexible Timing: Customize the delay to suit your website's loading speed and user behavior patterns.

Enhance Your Customization with PromptGPT

While the Visual Editor provides extensive customization options, you might want to take your chatbot's design even further. PromptGPT offers advanced capabilities to refine and enhance your generated CSS, including the addition of sophisticated animation effects.

By taking the CSS you generate from the Visual Editor and inputting it into PromptGPT, you can:

Customize Further: Modify existing styles to better fit your brand or personal preferences.
Add Animations: Incorporate smooth transitions and engaging animations to make your chatbot more interactive and visually appealing.
Optimize Performance: Enhance the efficiency and responsiveness of your chatbot's interface.

To explore these advanced customization options, visit PromptGPT using the following link:

https://chatgpt.com/g/g-vjbcE7byc-knowledgebasegpt

Leverage PromptGPT to create a truly unique and dynamic chatbot experience.

Customization Options Summary

Below is a comprehensive table summarizing all available customization options for your webchat interface. These settings allow you to personalize the chat launcher, icons, avatars, animations, and more to align perfectly with your brand and user engagement strategies.

Category	Option Name	Description	Possible Values	Default
Colors	--primaryColor	Primary color for elements such as buttons and highlights.	Hex color code (e.g., #36d6b5)	#36d6b5
	--secondaryColor	Secondary color, typically used for backgrounds or text.	Hex color code (e.g., #ffffff)	#ffffff
Font Settings	--fontFamily	Font family used across the chatbot interface.	CSS font-family values (e.g., Helvetica, Arial, sans-serif)	Helvetica, Arial, sans-serif
	--fontWeight	Font weight for text.	CSS font-weight values (e.g., bold, normal)	bold
Header Settings	--headerTextSize	Font size for the header text.	CSS size (e.g., 18px)	18px
	--headerTextColor	Color of the header text.	Hex color code (e.g., #ffffff)	#ffffff
	--headerBackgroundLayers	Background color or gradient for the header.	Hex color code or gradient CSS (e.g., linear-gradient(to right, #36d6b5, #1abc9c))	#36d6b5
	--headerHeight	Height of the header.	CSS size (e.g., 60px)	60px
	--headerTextAlign	Text alignment within the header.	left, center, right	center
	--cornerStyle	Corner style for the header (rounded or square).	CSS border radius (e.g., 20px)	20px
	--headerPaddingLeft	Padding on the left of the header content.	CSS size (e.g., 20px)	20px
Chat Area Settings	--chatAreaBackgroundColor	Background color of the chat area.	Hex color code (e.g., #f8f9fa)	#f8f9fa
	--chatAreaBackgroundImage	URL for a background image in the chat area.	URL of the image (e.g., https://example.com/image.jpg)	none
	--chatAreaBackgroundPosition	Positioning of the background image.	CSS position (e.g., center, top, bottom)	center
	--chatAreaBackgroundRepeat	Whether the background image repeats.	repeat, no-repeat, repeat-x, repeat-y	no-repeat
	--chatAreaBackgroundSize	Size of the background image.	cover, contain, auto	cover
Message Settings	--messageTextSize	Font size for messages.	CSS size (e.g., 14px)	14px
	--messageCornerStyle	Corner style for message bubbles.	CSS border radius (e.g., 20px)	20px
	--botMessageTextColor	Text color for bot messages.	Hex color code (e.g., #212529)	#212529
	--botMessageBg	Background color for bot messages.	Hex color code (e.g., #eeeeee)	#eeeeee
	--userMessageTextColor	Text color for user messages.	Hex color code (e.g., #ffffff)	#ffffff
	--userMessageBg	Background color for user messages.	Hex color code (e.g., #36d6b5)	#36d6b5
Avatar Settings	--avatarSize	Size of the avatar image.	CSS size (e.g., 50px)	50px
	--avatarBorderColor	Border color of the avatar image.	Hex color code (e.g., #36d6b5)	#36d6b5
	--avatarImageURL	URL for the avatar image.	URL of the image (e.g., https://via.placeholder.com/50)	https://via.placeholder.com/50
	--avatarDisplay	Whether the avatar is displayed.	inline-block, none	inline-block
	--avatarShape	Shape of the avatar (circle or square).	Percentage or pixel value (e.g., 50% for circle, 0% for square)	50%
Chat Input Settings	--chatInputBackground	Background color or gradient for the input area.	Hex color code or gradient CSS	#ffffff
	--chatInputTextFieldBg	Background color of the input text field.	Hex color code (e.g., #f1f1f1)	#f1f1f1
	--chatInputTextFieldTextColor	Text color in the input text field.	Hex color code (e.g., #333333)	#333333
	--chatInputBorderRadius	Border radius for the input field.	CSS border radius (e.g., 18px)	18px
Icon Settings	--iconsDisplay	Display or hide icons such as mic and upload buttons.	inline-block, none	inline-block
Button Styles	--buttonTextSize	Font size for buttons.	CSS size (e.g., 14px)	14px
	--buttonFontWeight	Font weight for buttons.	CSS font-weight (e.g., bold)	bold
	--buttonPadding	Padding inside buttons.	CSS size (e.g., 10px 20px)	10px 20px

Conclusion

With Chatbot Builder AI's best-in-class Visual Editor for Webchat, customizing your chatbot’s design is easier than ever. Personalize colors, fonts, layouts, and more—no coding required—to create an interface that perfectly aligns with your brand.

See it in action in our Live Demo on YouTube, where we showcase its features and guide you through designing a professional, engaging chatbot in minutes.

The combination of a user-friendly interface and comprehensive customization options ensures that your chatbot not only functions seamlessly but also aligns perfectly with your brand's aesthetic. By integrating with PromptGPT, you can further elevate your chatbot's design with advanced customizations and animations. Dive into the Visual Editor today and transform your chatbot experience!