Customizing the interface of your chatbot on Resinq allows for a more tailored and engaging user experience. This guide will walk you through the various settings and options available to personalize your chatbot’s appearance and behavior.
Customizing Interface Elements
Resinq provides several options to customize your chatbot's interface directly from the 'Chat Interface' section in the settings menu. Here’s how you can adjust these settings:
Message Placeholder
Customize the placeholder text in the chat input area to guide users on what to type.
Navigate to Chat Interface.
Access this section through the main settings menu by selecting 'Chat Interface' from the options.
Enter your desired text in the 'Message Placeholder' field.
Type in text that will appear in the chat input box before users begin typing, such as "Ask me anything!"
The changes will be visible immediately on the chatbot interface preview on the right side.
Ensure the placeholder text is clear and inviting to enhance user interaction.
Footer
Add custom text to the footer of the chat interface to include additional information or branding.
In the 'Chat Interface' settings, find the 'Footer' text field.
This field is typically at the bottom of the chat interface settings page.
Input your footer text.
Consider adding copyright information, contact details, or helpful links.
Observe the immediate update in the interface preview.
Check the preview to ensure the text aligns correctly and appears as intended.
Theme
Choose between a light or dark theme to match your branding or preference, improving the visual appeal of your chat interface.
Select the 'Theme' option.
Find this option within the 'Chat Interface' settings.
Choose 'Light' or 'Dark' to apply across the chat interface.
Select the option that best fits your company's branding or the preference of your target audience.
Chatbot Alignment
Adjust the alignment of the chatbot button on your page to ensure it is easily accessible yet non-intrusive.
Click on 'Chatbot Alignment'.
This option allows you to modify where the chatbot icon appears on your website.
Select 'Left', 'Center', or 'Right' to position the chatbot icon accordingly.
Choose a position that makes the chatbot easily visible without disrupting the layout of your existing web content.
Initial Messages Pop-ups
Set a delay for how quickly the initial messages pop up after the chat interface loads, optimizing user engagement without being too intrusive.
Adjust the slider under 'Show initial messages pop-ups after' to set the delay (in seconds).
This setting helps in managing how soon after the interface loads the initial messages will appear, allowing for a customized user experience.
Display Name
Set the name displayed as the chatbot’s agent name to personalize the chatbot and make interactions feel more engaging.
Enter the desired name in the 'Display Name' field to update the chatbot’s identity.
This name will appear in the chat interface, representing the chatbot during interactions with users.
Managing Visuals
Chatbot Avatar
Upload a custom avatar for your chatbot to strengthen brand identity and make the chat interface more visually appealing.
Under 'Chatbot Avatar', click 'Upload Image'.
Choose a file selector to upload a new avatar image.
Choose an image (JPG or PNG, up to 3MB).
Select an image that is professional and reflective of the chatbot’s purpose and personality.
Chatbot Icon
Customize the icon that represents your chatbot on the interface to make it distinctive and recognizable.
Select 'Upload Image' under 'Chatbot Icon'.
This allows you to upload a custom icon for the chatbot that appears on the web interface.
Upload your preferred icon image.
Ensure the icon is clear, recognizable, and consistent with your branding.
User and Bot Colors
Define colors for text, background, and icons for both the user and the bot to enhance readability and align with your visual branding.
Navigate to 'User Colors' and 'Bot Colors'.
These settings allow you to customize the color scheme for both sides of the chat conversation.
Adjust the color settings for text, background, and icon to align with your visual theme.
Choose colors that ensure good contrast for readability and aesthetic appeal.
Best Practices for Interface Customization
- Consistency: Ensure that your chatbot’s design aligns with your overall brand identity to maintain a professional appearance.
- Accessibility: Choose colors and themes that are easy on the eyes and accessible to users with visual impairments to ensure inclusivity.
- Testing: Regularly test the chatbot interface across different devices and browsers to ensure optimal performance and appearance, addressing any compatibility issues.
Troubleshooting Interface Issues
If you encounter problems while customizing your chatbot interface:
Changes Not Reflecting
Image Upload Errors
By following this guide, you can effectively customize your Resinq chatbot interface to enhance both the aesthetic appeal and the functional experience for users.