Introduction
Customising your Richpanel widget is straightforward. This guide will show you how to change its appearance to match your website and how to choose the self-service topics that your customers see first. With these easy steps, your widget will not only blend in with your site but also provide quicker solutions for your customers.
Prerequisites
Basic understanding of self service
Admin access on Richpanel
Steps to customise your widget
Step 1: Access the Widget Customization Settings
- Log into your Richpanel account, click on the Self Service option on the left-hand side navigation.
- Select the brand for which you want to customise the widget from the top left hand corner.
- Under Getting Started, click on Greetings & styling to start customising the widget.
Step 2: Set Greetings for Your Customers
- Under the Greetings & Styling section, you can set the welcome message and team introduction text.
- In the Greeting message field, type in the message that visitors will first see — for example, "Having trouble?"
- In the Introduce your team field, add a brief introduction of your team or tagline, like "We are here to help.”
Step 3: Customize Widget Colors and Logo
- Scroll to the Widget colors section to set your brand colors and logo.
- Click on the Fetch brand colors from URL button if you want to automatically pull colors from your website, or select the color swatches to choose custom colors.
- To upload your brand logo, click on the logo area and select an image file from your computer. If you’ve already set up the brand logo, it will reflect here.
- For customising Text color of your greeting message, click the color circle to select a color that contrasts well with your primary color to make the text stand out.
- Under Advanced Settings, you can customize the Button color and Widget icon color by selecting from the provided color options.
- To make your widget background unique, upload a custom image by clicking on Upload Image option under Background Image to add a personal touch to the widget's background.
- Match your brand's style by selecting a font from the 'Fonts' dropdown menu, or upload your own to match your website's text.
Step 4: Set Team Avatars
- To add a personal touch and allow customers to see who they're talking to, you can add Team avatars within the customization settings
- Select the team whose display pictures you want to show on the widget from the 'Select Display Pictures' dropdown menu.
Step 5: Configure the Custom Launcher
- To control how the messenger is activated through specific elements on your website, you can set up custom launcher.
- To open live chat, input the class or ID for the button or link that should open the live chat (e.g.,
#rp-homefor IDs,.rp-homefor classes). - To open Help Center inside live chat, input the class or ID for the button or link that should open the help center inside live chat (e.g.,
#rp-helpcenterfor IDs,.rp-helpcenterfor classes). - To open Prechat Survey inside live chat, input the class or ID for the button or link that should open the prechat survey (e.g.,
#rp-prechatfor IDs,.rp-prechatfor classes). - For starting a conversation with a pre-defined message, enter the Class or ID in the specified field (e.g.,
#rp-message) and type your custom message in the Start a conversation with custom message box.
As you make these changes, You can see the live preview to the right of the screen. Once satisfied with the look, click 'Save' to apply the changes to your widget.
Conclusion
By following these simple steps, you can make your Richpanel widget feel like an integral part of your site, ensuring a seamless and branded experience for your customers. Customisation not only boosts the visual appeal but also fosters a sense of familiarity and trust in your customer support.