--- title: Widget Customization description: "Required: <script>    (function(i,n,v,o,s,l,t){        i[o+'URL']=s;i[o]=i[o]||{init:function(){i[o].q=arguments}};l=n.createElement(v);        t=n.getElementsByTagName(v)[0];l.async=1;l.src=s+'/js/wi" --- [Skip to content](https://service.invosolutions.com/migration/knowledge/widget#main-content) English Show submenu for translations [Submit a ticket](https://service.invosolutions.com/migration/knowledge/kb-tickets/new) [Customer portal](https://service.invosolutions.com/tickets) ![Invo\_Primary\_Logo\_Blue\_Black.png\]](https://service.invosolutions.com/hs-fs/hubfs/Invo_Primary_Logo_Blue_Black.png?height=40&name=Invo_Primary_Logo_Blue_Black.png) Open main navigation Close main navigation - English Show submenu for translations - [Submit a ticket](https://service.invosolutions.com/migration/knowledge/kb-tickets/new) - [Customer portal](https://service.invosolutions.com/tickets) - Home Home How can we help you? - There are no suggestions because the search field is empty. 1. [Invo Library](https://service.invosolutions.com/migration/knowledge) 2. [Invo Core](https://service.invosolutions.com/migration/knowledge/invo-core) # Widget Customization ### **Widget** ### **Setup** - Make sure the widget feature has been enabled and set up on your Video Banking platform. - Append this script to the \ of your FI website‘s DOM. --- Required: \    (function(i,n,v,o,s,l,t){        i\[o+'URL'\]=s;i\[o\]=i\[o\]||{init:function(){i\[o\].q=arguments}};l=n.createElement(v);        t=n.getElementsByTagName(v)\[0\];l.async=1;l.src=s+'/js/widget.js?id='+Date.now();t.parentNode.insertBefore(l,t);})    (window,document,'script','InvoWidget','https://url.to.the.vb.website');   Optional customization: InvoWidgetOptions = { btnSize: “80px”, //Button size // Custom Colors, terms defined between the square brackets are reserved for string values, the square brackets should be removed primaryColor: “\[color1\]”, succesColor: “\[color2\]”, warningColor: “\[color3\]”, // Custom loading loadinGIF: “\[url-to-the-custom-loading-gif\]”, loadingSize: “200px”, // Custom icons icons: {    \[iconKey\]: “\[icon-svg-path-description\]”,    \[iconKeyBis\]: {                   src: “\[path-to-the-image\]”,                   scale: “fit” } } \   Required: - In the \ of your FI website’s DOM, add this tag. \ --- ### **Customization** #### 1.     Feature customization There are currently 3 features supported by the Widget: - **Chatbot:** Offering an interface for end-users to interact with the FI through a chat interaction. - **Booking:** Offering an interface for the end user to schedule an appointment - **VB:** Showing button linked to the video banking website. By default, the widget is designed to show all the available features. For example, if the FI has Video Banking and Chatbot but not Booking**,** the widget will show buttons to access the VB and the Chatbot features. For any reason, if the FI wants to enable only a given set of features for the widget, just list all the expected features into the **invo-widget's modules** parameters and separate them with a **|.** #### 2.     Wording customization Wording customization is not available until Core VB platform is updated to version 4.4. In 4.4 and above, we allow the FI to easily customize the widget’s wording through our Verbiage Customization module. All the widget’s wording would be defined in the **invoWidget** namespace. For Core versions before **4.4,** please submit a ticket with all the expected changes for widget wording to our support team, then our engineers will build a custom one for your institution. #### 3.     Colors customization The **primaryColor** is the default color for buttons and window headers. ![](https://service.invosolutions.com/hs-fs/hubfs/undefined-Jun-26-2023-03-02-00-1580-PM.png?width=394&height=241&name=undefined-Jun-26-2023-03-02-00-1580-PM.png) ![](https://service.invosolutions.com/hs-fs/hubfs/undefined-Jun-26-2023-03-02-28-9060-PM.png?width=324&height=275&name=undefined-Jun-26-2023-03-02-28-9060-PM.png) The **successColor** and **warningColor** are respectively used for customizing the color of the Confirm (![](https://service.invosolutions.com/hs-fs/hubfs/undefined-Jun-26-2023-03-08-02-1214-PM.png?width=25&height=24&name=undefined-Jun-26-2023-03-08-02-1214-PM.png)) and Delete(![](https://service.invosolutions.com/hs-fs/hubfs/undefined-Jun-26-2023-03-08-06-6718-PM.png?width=25&height=23&name=undefined-Jun-26-2023-03-08-06-6718-PM.png)) buttons in the screen below. ![](https://service.invosolutions.com/hs-fs/hubfs/undefined-Jun-26-2023-03-07-34-2542-PM.png?width=506&height=258&name=undefined-Jun-26-2023-03-07-34-2542-PM.png)   #### 4.     Booking loading UI Between the different steps of the booking module, we have a loading screen. You can customize the loading UI as well by replacing the default loading gif with your preferred one. You need to have your GIF file accessible publicly via a URL. Set the URL as the value of **loadingGIF** parameter in the **InvoWidgetOptions** object. The **loadingSize** parameter is useful for adjusting the size of the loading image. ![](https://service.invosolutions.com/hs-fs/hubfs/undefined-Jun-26-2023-03-10-13-6199-PM.png?width=264&height=184&name=undefined-Jun-26-2023-03-10-13-6199-PM.png) #### 5.     Styling customization The widget is loaded into a website that your FI owns. You can add dedicated CSS styling codes to your DOM to overwrite our styling presets. #### 6.     Icons customization Some icons used in the widget can be customized as well by specifying an SVG-path-description in the **icons** section of the **InvoWidgetOptions** object. The list of customizable icons are as follows: - **plus:** the icon which shows by default is a plus sign, used to show widget options when the cursor is hovering on the widget. - Others include **“*minus, cancel, confirm, close, minimize, calendar, warn\_triangle, chat, phone, vb, in\_branch\_video, in\_person****”* ### a.      Using a published image with default round border If you have an image (PNG, JPEG, GIF..) uploaded somewhere on the internet (cdn for example), and you want to use it as an icon in the widget, the only thing you need is the URL to the image and to declare the given URL in **InvoWidgetOptions.** The snippet below show 2 examples of how to customize the **chat** icon. - Example 1 shows how to fit the icon inside the button by tweaking the **scale** parameter - Example 2 is equivalent to example 1 but with the **scale** parameter set to **fit![](https://service.invosolutions.com/hubfs/undefined-Jun-26-2023-03-10-36-1201-PM.png)** **InvoWidgetOptions** = {          **// example 1**      **icons:** {               **chat**: [https://demo.invosolutions.com/images/chat-icon.svg](https://demo.invosolutions.com/images/chat-icon.svg),        }          **// example 2**        **icons:** {               **chat**: {                   **src**: [https://demo.invosolutions.com/images/chat-icon.svg](https://demo.invosolutions.com/images/chat-icon.svg),                  **scale**: “fit”          }      } \   ### b.     Using SVG-path description The SVG-description for the icon is defined as the value of the **d** parameter, which describes a **path** defined in a 64-by-64 viewbox SVG. The icon will be embedded in the DOM as follows:     \         \             \\         \     \ For example, the chat icon ![](https://service.invosolutions.com/hs-fs/hubfs/undefined-Jun-26-2023-03-10-58-4962-PM.png?width=23&height=25&name=undefined-Jun-26-2023-03-10-58-4962-PM.png) would be embedded as follows:     \         \             \         \     \ Useful resources: [https://yqnn.github.io/svg-path-editor/](https://yqnn.github.io/svg-path-editor/)   ### c.      Using a published image with a custom class Parameters: - The “src” property of each icon will override the default icon for the widget element. - If a class name is specified, it will assign a class to the widget elements.   ---   For one widget element - Example:![](https://service.invosolutions.com/hubfs/undefined-Jun-26-2023-03-11-36-7219-PM.png) - Code example: // Script code **InvoWidgetOptions** = {      **icons:** {                chat: {                     src: "https://w7.pngwing.com/pngs/1001/63/png- -sticker-electronics-face-careobot.png",                     class: "invo-widget-chat"                 } } // Setup custom styles .invo-widget-chat {            margin-top: auto;            margin-bottom: auto; } .invo-widget-chat \> img {            width: 2rem;            height: 2rem;            padding-left: 0.2rem;            padding-right: 0.2rem; } ---   For two widget elements: - Example: ![Graphical user interface, application Description automatically generated](https://service.invosolutions.com/hs-fs/hubfs/undefined-Jun-26-2023-03-11-47-8468-PM.png?width=49&height=26&name=undefined-Jun-26-2023-03-11-47-8468-PM.png) - Code example: **InvoWidgetOptions** = {      **icons:** {                chat: {                     src: "https://w7.pngwing.com/pngs/1001/63/png-sticker-electronics-face-careobot.png",                     class: "invo-widget-chat"                 },                 calendar: {                     src: "https://www.vhv.rs/dpng/d/215-2152946\_-appointment-icon-png-transparent.png",                     class: "invo-widget-booking"                 }                 minimize: {                     src: "https://toppng.com/uploads/preview/minimise-11551049819kkxdkjjm6p.png",                     class: "invo-widget-minimize"                 },                 plus: {                     src: "https://w7.pngwing.com/pngs/100/522/png-transparent- -signs-sign-thumbnail.png",                     class: "invo-widget-plus"                 } }   // Setup custom styles .invo-widget-chat, .invo-widget-booking, .invo-widget-minimize, .invo-widget-carousel {            margin-top: auto;            margin-bottom: auto; } .invo-widget-chat \> img, .invo-widget-booking \> img, .invo-widget-minimize \> img, .invo-widget-carousel \> img{         width: 2rem;         height: 2rem; padding-left: 0.2rem; padding-right: 0.2rem;     } ---   For three widget elements: - Example: ![](https://service.invosolutions.com/hs-fs/hubfs/undefined-Jun-26-2023-03-12-03-3980-PM.png?width=116&height=36&name=undefined-Jun-26-2023-03-12-03-3980-PM.png) - Code example: **InvoWidgetOptions** = {      **icons:** {                chat: {                     src: "https://w7.pngwing.com/pngs/1001/63/png-sticker-electronics-face-careobot.png",                     class: "invo-widget-chat"                 },                 calendar: {                     src: "https://www.vhv.rs/dpng/d/215-2152946\_-appointment-icon-png-transparent.png",                     class: "invo-widget-booking"                 },        vb: {                    src: "https://cutewallpaper.org/24/video-icon-png/png-play-3570982-pinclipart.png",                    class: "invo-widget-vb"                 },                 minimize: {                     src: "https://toppng.com/uploads/preview/minimise-11551049819kkxdkjjm6p.png",                     class: "invo-widget-minimize"                 },                 plus: {                     src: "https://w7.pngwing.com/pngs/100/522/png-transparent- -signs-sign-thumbnail.png",                     class: "invo-widget-carousel"                 },                setting: {                    src: "https://www.citypng.com/public/uploads/preview/hd-settings-background.png",                    class: "invo-widget-setting"                } }   // Setup custom styles /\* Used for chatbot, vb, booking and minimize icon \*/ .invo-widget-chat, .invo-widget-vb, .invo-widget-minimize, .invo-widget-booking {            margin-top: auto;            margin-bottom: auto; } .invo-widget-chat \> img, .invo-widget-vb \> img, .invo-widget-minimize \> img, .invo-widget-booking \> img{            width: 2rem;            height: 2rem;            padding-left: 0.2rem;            padding-right: 0.2rem; } /\* Used for carousel when using all vb, booking and chatbot || when two components for plus style\*/ .invo-widget-carousel \> img{            width: 2rem;            height: 2rem;            padding-left: 0.2rem;            padding-right: 0.2rem; } /\* Used for setting when not specifying language \*/ .invo-widget-setting \> img{            width: 2rem;            height: 2rem;            padding-left: 0.2rem;            padding-right: 0.2rem; } --- ### d.      Additional widget customization features The widget icons can be additionally customized to suit the needs of the FI using                                    the following: .widget-icon {            border: none;            padding: 0px;            margin: 0px;            transition: ease .5s;            border-radius: 10px;            overflow: hidden;        }   .widget-icon:hover {            scale: 1.05        }   .widget-icon \> img {            height: 60px; /\* Customize icon height here \*/            cursor: pointer;            object-fit: cover;        }   .w-row {            display: flex;            flex-direction: row;        } ---   - [General](https://service.invosolutions.com/migration/knowledge/general) - [Invo Core](https://service.invosolutions.com/migration/knowledge/invo-core) - [Invo Text](https://service.invosolutions.com/migration/knowledge/invo-text) - [Release Notes](https://service.invosolutions.com/migration/knowledge/release-notes) - [Invo Booking](https://service.invosolutions.com/migration/knowledge/invo-booking) - [Invo Kiosk](https://service.invosolutions.com/migration/knowledge/invo-kiosk) - [Invo Chat](https://service.invosolutions.com/migration/knowledge/invo-chat) - [Training](https://service.invosolutions.com/migration/knowledge/training) - [Invo Concierge](https://service.invosolutions.com/migration/knowledge/invo-concierge) [![Invo primary logo](https://service.invosolutions.com/hs-fs/hubfs/Invo_Primary_Logo_Blue_Black.png?width=3750&height=1251&name=Invo_Primary_Logo_Blue_Black.png "Invo primary logo")](https://invosolutions.com) Copyright © 2026, Invo Solutions