How Can I Customize Gaby's Appearance?

You can fully customize Gaby to match your brand to fit seamlessly in your website. You can easily adjust colors, fonts, and position to align with your existing design.

To set up Gaby on your website, start by referring to the Gaby User Guide (https://www.talenttransformation.com/gaby-user-guide). Once your account is activated, you can use the Gaby's Guidance page (https://www.talenttransformation.com/gaby-partner) to configure the following:

• Gaby’s Icon

• Title for your Gaby

• Chat invitation text

• Introductory text for users

• Your website URLs to train Gaby with your content

• Suggested questions to kickstart conversations

How to Embed Gaby on Your Website

To integrate Gaby into your website, simply embed the following code into your site's HTML header:

<script src='ericaChat.js'></script> 
<script>gabyPartnerChatbot.init('your-unique-partner-id');</script>

Gaby provides customization options using Cascading Style Sheets (CSS) and JavaScript, allowing you to fully align her appearance and behavior with your brand. You can adjust colors, fonts, icons, and interactions to create a consistent, optimized user experience across all devices. This flexibility ensures that Gaby integrates seamlessly into your website’s design, enhancing user engagement and interaction.

How to Customize Gaby’s Style

Your website visitors will primarily interact with Gaby through the chat interface (#TTPartnerChat). By customizing this component, you can ensure the chat window blends seamlessly with your website’s design. Here’s a sample CSS snippet to adjust the size:

#TTPartnerChat {
	width: 100%; /* Ensures full width on any device */
	height: 60%; /* Sets optimal height for user interactions */
	right: 5%; /* Positions the chat window on mobile screens */
	bottom: 5%; /* Adjusts placement for better accessibility */
}

Responsive Design Best Practices

With mobile usage on the rise, it’s essential to ensure that Gaby is responsive and adapts seamlessly to various screen sizes. Using CSS media queries, you can adjust Gaby’s size and position based on the device your visitors are using. Here’s a sample CSS snippet to adjust the look and feel for tablets and mobile devices:

/* For tablets */
@media (max-width: 768px) {
 #TTPartnerChat {
  height: 50%; /* Adjust height to optimize interactions on tablets */
 }
}

/* For mobile devices */
@media (max-width: 480px) {
 #TTPartnerChat {
  width: 90%; /* Use more screen width for a better mobile experience */
  height: 60%; /* Increase height for better chat visibility */
  bottom: 10px; /* Adjust positioning for easier thumb access */
 }
}

These adjustments help ensure Gaby remains user-friendly and fully integrated, providing consistent and engaging experience across all devices.

Customizing Gaby’s Interaction Icon

The Gaby icon can be uploaded during the initial setup using the Gaby's Guidance page. This icon (#TTPartnerChatButton) is your website’s initial point of interaction with users. Here’s a sample CSS snippet to adjust the look and feel of the Gaby icon:

#TTPartnerChatButton {
 width: 60px;  /* Ensures optimal visibility across devices */
 right: 5%;    /* Positions button for a sleek mobile layout */
 bottom: 5%;   /* Improves accessibility on mobile devices */
}

By customizing the icon, you can make it stand out and invite user engagement and ensure it fits seamlessly into the browsing experience.

Customizing the Chat Invitation Text

The Chat Invitation Text is defined during the initial setup using the Gaby's Guidance page. The Chat Invitation Text (TTPartnerFloatTitleDescription) plays a key role in setting visitor expectations and introducing Gaby’s functionality. Here’s a sample of how to style the Chat Invitation Text using CSS:

#TTPartnerFloatTitleDescription {
 background-color: #007bff; /* Integrates with your brand colors */
 bottom: 70px; /* Optimizes visibility on different screen sizes */
}

Customizing this element reinforces your brand identity and ensures clear, attention-grabbing prompts, making it easier for visitors to engage with Gaby across all devices.