KB

Sign In

Classic Widget Configuration & Branding





The widget provides a simple, one-off integration with your website. Once integrated, you can configure the widget from your OneDesk without any additional updates to your website. The widget gives customers access to several customer applications, displayed as tabs within the widget. These apps are: the messenger, portal, webforms, and knowledgebase. 


What is the web widget?

The web widget is an application that can be added to your site and appears as a bubble icon on the side of the page. When that icon is clicked, customers can access any or all the customer apps you have enabled. Each app appears as a tab within the widget. The widget itself can be configured in terms of appearance as well as which apps are included within the widget. 

Note: There are two widget types: the MFA widget and the Classic widget. Learn more about the differences: MFA vs. Classic Apps. This article primarily focuses on the Classic Widget. 

Example of a widget displayed on the corner of a webpage.



How to embed the widget on your website

The widget can be embedded onto your website or intranet through a JavaScript snippet. 


Step 1: Generate the JavaScript snippet (Select the classic or MFA version)

For the classic widget:

  • Go to Administration > Customer Apps > Classic App Settings > Scroll down to Put the widget on your website > Click on Generate Snippet

For the MFA widget:

  • Go to Administration > Customer Apps > Mobile Friendly App Settings > Scroll down to Put the widget on your website > Click on Generate Snippet


Step 2: Add the generated script to one or more pages of your website before the closing body tag. </body>

If you would like the apps on all pages of your website, we recommend adding the script to your page footer. Once embedded you can make many configurations directly from your OneDesk admin settings without making additional changes to your website.



If your website is on WordPress, you could use the WordPress plugin. For detailed instructions please see: Installing the OneDesk Widget on WordPress

 If you use Joomla, you could use the Joomla plugin. 


It is also possible to embed the widget (or individual customer apps) directly onto your page using an iFrame. See the detailed article: Adding Customer Apps to your Website.


Add/modify apps displayed in the widget

You can create multiple separate portals, webforms, or knowledgebase apps, all within one widget. You can also hide any of the apps from the widget, or delete an app entirely. 


By default the widget contains the following apps:

Messenger - Serves as a live chat between you and your customers 

Portal - The main interface where your customers log in to check on the status of their tickets, ask questions, and collaborate with you.

Webform - Allows customers to submit tickets or tasks to you.

Knowledgebase - A self-service/FAQ section for your customers or an internal knowledgebase for your team.


Configure which apps are displayed in the widget

There are three options to remove apps from the widget.

  1. Disable the app entirely.
  2. Delete the app entirely.
  3. Hide the app without disabling or deleting it.

You can hide apps from displaying inside the widget without disabling them. You may want to do this in the case that you prefer your customers to access a certain app by means other than the widget. For example, you may want the live chat within the widget, but the portal to be accessed via a link on your page.  (If you don't want to use the app at all you can disable or delete it instead, see Create, Disable or Delete Apps)


Hide an app from the widget

To hide an app but keep it enabled, go to Administration >> Customer Apps

  1. .First ensure the app is enabled in the 'Customer Apps List.'
  2. .If you are using the Classic Widget, go to the Classic App Settings tab, or MFA Settings tab if you are using the MFA widget. Here you will see all your apps within the gray bubbles under the 'Add Customer Apps to Your Widget' section. (Disabled apps are shown in lighter grey). 
  3. To hide an app from being displayed in the widget click the' X.'  Once again, the app is still enabled for use but is not accessible from the widget.

You can make an app visible again by clicking on 'Add' and select the app. 


The above section displays all your available apps. Apps not displayed here are hidden from the widget. Apps in light grey are currently disabled and also do not display in the widget. You must re-enable an app in order to display it in the widget. 

 


Widget appearance & branding 


To adjust the widget icon, go to Administration >> General Settings >> Widget Bubble Appearance.


The widget can be displayed as either a large bubble or small bubble.

The large bubble has custom text you may configure. The 'Online Message' is displayed when your Messenger is set to 'Online.' The 'Offline Message' is displayed when you are set to 'Offline.'

The large bubble also has the option to choose a user avatar. If no avatar is chosen the speech bubble icon is displayed. To create a unique avatar image separate from your actual users, you can also create a ‘dummy’ user.



Color Configurations:

To configure the colors of your widget, go to the Customer Apps >> Classic App Settings tab.

(Note: These color settings configure the Classic/MFA widget bubbles, the Classic Portal, and Classic Messenger. Other MFA app colors can be configured from their respective settings pages. See also: Tickets Portal (MFA))


  • Main Color - Replaces the background color of the Classic Messenger header. the MFA/Classic widget bubble, and the Classic Portal colors. 


  • Main Text Color - Replaces text color on the side panel text and main buttons

(Welcome text in Classic Messenger, side panel text of the expanded or full-size Classic Portal, the login button, and customer name.)

  • Secondary Text Color - Replaces text color on the side panel text.
  • Secondary Button Color - Replaces the color of sorting tabs and secondary buttons.

(Sorting and navigation button on portal)

  • Secondary Button Text Color - Replaces the text color on sorting tabs and secondary buttons

(Colors under the tabs, Classic Messenger send & attachment button)


  • Body Color - Replaces the color of body text and icons

(The item text in the Classic Portal)



Configure the widget bubble from the code snippet

Another method of configuring your widget is by adding parameters to the JavaScript snippet (the one used to embed the widget to your site). You can change the position on the page, colors, and icons. If you don’t specify a property it will use the default. Don’t change the org-name since this is what sets it to your own customer portal. (Keep in mind this is entirely optional and many configurations can be made directly in your OneDesk admin settings as described above.)


Here are the parameters you can add to the snippet:

  • origin = “ ”
  • Changes the position of the widget to the far corner of the window and the direction the widget opens. Valid values include “left” and “right”. (e.g. origin=”left”)
  • x = “ ”
  • Granularly changes the position of the widget along the x-axis. Valid values include numbers (e.g. x=”100″).
  • y = “ ”
  • Granularly changes the position of the widget along the y-axis. Valid values include numbers (e.g. y=”100″).
  • distance = “ ”
  • Granularly changes the position of the widget along the x-axis. Valid values include numbers (e.g. distance=”100″).
  • close-color = “ ”
  • Changes the color of the ‘close (‘X’) widget icon which displays on the widget while it is open. Valid values include HEX codes, RGB, and color names. (e.g. close-color=”red”)
  • open-color = “ ”
  • Changes the main icon color (the color of the widget bubble when it is not open). Valid values include HEX codes, RGB, and color names. (e.g. open-color=”#FF0CB”)
  • bubble-mode = “ ”
  • Changes the size of the widget bubble. Valid value includes ‘small.’ Large is the default. (e.g. bubble-mode=”small”)
  • bubble-online-text = “ ”
  • Changes the text displayed within the bubble when you are set to online (displays in large size bubble only) Valid values include letters, numbers, special characters. The bubble expands based on the amount of characters entered. (e.g. bubble-online-text=”How can we help?”)
  • bubble-offline-text = “ ”
  • Same as above, but is displayed when your chat is set to offline. (e.g. bubble-offline-text=”Offline. Leave a message”)
  • bubble-text-color = “ ”
  • Changes the text displayed in the widget bubble (large icon only). Valid values include HEX codes, RGB, and color names. (e.g. bubble-text-color=”aqua”)


Example of the parameters added to the snippet. 


Resulting widget changes based on the parameters added.


Additional Configuration

You can require customers to login to use most of the apps. Customers may register themselves or you can manually invite customers . Manually invitation is done from the Customers app on the left side bar. To toggle this permission, go to Customer Apps > General Settings > scroll down to Customer registration. 


Other customizations of each individual customer app is available within the apps setting in Administration.


Related Articles: