Collapse
Submit a Service Request
Contact Information for Technical Support
My Service Notifications
Branding the launch button in Web Chat for Service
Answer ID 12820 |
Last Review Date 04/26/2024
How do I brand the launch button in the Web Chat widget with an icon and text?
Environment
Chat, Engagement Engine
Oracle B2C Service 23D and higher
Web Chat for Service component version 23.08.01 (minimum required version)
Resolution
By default, the launch button will only show an icon. In B2C Service 23D or Web Chat for Service component 23.08.1 we have added additional launch button settings. You can now add some text either to its right or left by enabling the setting enableText, the translation string key is launchButtonText.
If you are using Web Chat component version 23.12.1, you can find the same attributes in the new component UI in Engagement Engine which will show the attributes immediately instead of having to add them with the + sign. The desired CSS attributes will need to be added individually.
Configure the launch button using Engagement Engine
- Create a new Web Chat component or edit an existing one
- Click menu Functionality Configuration
- Select property Launch Button Settings and click the + sign to make it available for editing in the right column
- Make your changes to enable the text, the position of the text (left or right from the icon) and the desired styling
- Save and Publish your component
- Test the component on the site you have enabled it
Change the styling of the launch button
- In Launch Button Settings
- Check Enable Text to enable text in addition to the icon
- In attribute Text Position select where you want to position the text in relation to the icon
- Select End to position the text on the right of the icon
- Select Start to position the text on the left of the icon
- In attribute Styles, click the button Add Css Style for every CSS style variable that you want to add.
- Example:
- Name: color
- Value: white
- Example:
Note: As from Web Chat version 23.12.1 (EE 24A) you have the new component editor that drills into configuration levels. Click the arrow icon before Launch Button Settings to go a level up. In prior versions you had to add the full JSON code.
- Example off CSS styles that you can add individually via Add Css Style (JSON code example):
[
{"name": "color", "value": "white"},
{"name": "background-color", "value": "red"},
{"name": "height", "value": "75px"},
{"name": "width", "value": "200px"},
{"name": "font-size", "value": "large"},
{"name": "border-radius", "value": "25px"}
]
{"name": "color", "value": "white"},
{"name": "background-color", "value": "red"},
{"name": "height", "value": "75px"},
{"name": "width", "value": "200px"},
{"name": "font-size", "value": "large"},
{"name": "border-radius", "value": "25px"}
]
Modify the text string of the launch button
- Create a new Web Chat component or edit an existing one
- Click menu Functionality Configuration in the Web Chat component setup screen
- Select property Custom Strings (previous name was I18n)
- Find the translation key value launchButtonText for your specific locale in the JSON
"launchButtonText": "Chat with me?",
- Overwrite "Chat with me?" with your desired text
Modify the icon of the launch button
- Create a new Web Chat component or edit an existing one
- Click menu Functionality Configuration in the Web Chat component setup screen
- Select property Icons by clicking the + sign. You can now configure the icons in the right column.
Note: The icons used in the widget can be customized in two ways - the URL of the image asset, or an SVG string.
For the icons that support SVG strings, you can pass the raw SVG data that the widget renders as an inline SVG.
SVG strings allow for the faster loading of an image, the ability to animate it, or for changing its color.
For the icons that support SVG strings, you can pass the raw SVG data that the widget renders as an inline SVG.
SVG strings allow for the faster loading of an image, the ability to animate it, or for changing its color.
- In the new component editor (release 23.12.1 and later), all available icons are shown. Navigate to the Launch icon property.
Property description: The icon for the button that's displayed during the collapsed state of the chat widget to launch the expanded widget
- Enter the URL or the SVG for the image asset
Example:
<svg xmlns=" http://www.w3.org/2000/svg" viewBox="0 0 60 30" preserveAspectRatio="xMinYMid"><path d="M14.88,30H32.15a14.86,14.86,0,0,0,0-29.71H14.88a14.86,14.86,0,1,0,0,29.71m16.88-5.23H15.26a9.62,9.62,0,0,1,0-19.23h16.5a9.62,9.62,0,1,1,0,19.23" transform="translate(-0.02 0)" style="fill:#C74634"/></svg>
<svg xmlns=" http://www.w3.org/2000/svg" viewBox="0 0 60 30" preserveAspectRatio="xMinYMid"><path d="M14.88,30H32.15a14.86,14.86,0,0,0,0-29.71H14.88a14.86,14.86,0,1,0,0,29.71m16.88-5.23H15.26a9.62,9.62,0,0,1,0-19.23h16.5a9.62,9.62,0,1,1,0,19.23" transform="translate(-0.02 0)" style="fill:#C74634"/></svg>
Note: If you don't add your own icon, your component configuration will use the default icons available in the Web Chat widget.
Modify the color of the launch button
- Create a new Web Chat component or edit an existing one
- Click menu Layout Modification in the Web Chat component setup screen
- Select property Colors
- Navigate to field Launch Icon Background
- Enter the desired hexadecimal color
Example: #B72025
Note: if you want to change the hover color of the chat launch button you can add the following code to your index page:
<style> .oda-chat-button:hover {background-color: salmon !important; transition: 0.7s;} </style>
Result
Here is an example of what the above configuration will look on your portal.
