Customize The Look And Feel Of The Embeddable Widgets

  • 30 March 2018
  • 5 replies
  • 466 views

Userlevel 6
Badge +1

Make the embeddable widgets feel at home on your website, by customizing their color scheme, text, trigger and more. You can customize and preview the look and feel of the widgets from Control.
 

How To Customize The Look And Feel Of The Embeddable Widgets

  1. Go to Control Integrations  EMBEDDABLE WIDGET Customization.
  2. Configure the settings on this page to match your branding guidelines (see below for a more detailed explanation of each setting).
  3. Save your changes, and you’re good to go.

b7f08eef-3b07-4f86-9710-d72045174569.png

 

Click to see the settings you can configure:


General Settings:

 

  • Community URL: Define where the icon in the top left corner of the header links to (e.g. your community’s URL).
  • Position: Choose whether you want the conversational widget (and its trigger) to appear on the left or right side of the page.


Trigger Settings:

  • Trigger Type: Choose whether you want to use the ‘button’ trigger (displays on the side), or the ‘floating’ button trigger (floats just above the bottom of the screen).
  • Trigger Text: Define the text to display on the button (this only applies to the ‘button’ trigger).
  • Trigger Color: Set the color of the text/icon used inside the trigger.
  • Trigger Background Color: Set the background color of the trigger.


Header Settings:

  • Header Title: Define the text to display at the top of the conversational widget.
  • Header Background Color: Define the background color of the panel at the top of the Conversational widget.
  • Header Color: Define the color of the header title
  • Header Shadow: Enable/disable a drop shadow under the panel at the top of the Conversational widget (disable this for a ‘flat’ design).


Card Settings (shared with the in-page widget):

  • Card Title Text Color: Define the color of the text of the topic title.
  • Card Avatar Border: Define the shape of the avatar shown for each topic in the list (the last active user).
  • Card Metadata Color: Define the color of topic metadata text (the relative time since the last reply).
  • Card Border Color: Define the color of the border between cards in the topic list.

 

🎯 Hit the ‘Preview’ button at any time to check your changes and make sure the widget still looks fabulous.

💎 The color settings for the widgets are completely independent from your community color settings (Control → Customization → Colors).

⚠️ The in-page widget shares the same style configuration as the conversational widget (using the 'Card Settings' described above).
⚠️ Is the preview not loading? Make sure there's some content on your community in a public category that contains either: a) your company name; b) the word 'test'.


Finished customizing the look and feel of the widgets and ready to take the next step? Check out how to install the widgets on your website:

 


5 replies

Userlevel 2
Badge
Hi,

we added widget in one page of our main site https://kyivstar.ua/uk/support

https://prnt.sc/n6dwwq

We use ukrainian and russian languages. How can I change Help on Спільнота ?

And icons are backed up https://prnt.sc/n6e9gh

+

switch off sign Powerd by Insided https://prnt.sc/n6eayp

In our contract it is not provided. That is why this signature is not in our community either.
Userlevel 2
Badge
@Frank @Julian can you give me answers? Thnx
Userlevel 6
Badge +1
Hey @a.slyusar!



We use Ukrainian and Russian languages. How can I change Help on Спільнота ?




It is not currently possible to configure the text 'Help' when using the trigger type 'Floating trigger'. However, it is possible if you use 'Button trigger' (the button on the side of the screen). I notice you already found this option 🙂.



And icons are backed up https://prnt.sc/n6e9gh




This is a bug - thanks for letting us know - I've passed this on to our support team.



switch off sign Powerd by Insided https://prnt.sc/n6eayp




I'll look into this with the product team!
Userlevel 2
Badge +2

Is there a way to change the “Trigger” beyond the settings on the “Customization ” tab? We want to set our own icon. A place you can add our HTML/CSS etc.

 

Thanks!

Userlevel 7
Badge +1

Hey @Ben Anthonisz - we don’t have any direct configuration to achieve that, but the embeddable widgets do have a JavaScript API which you can use to trigger actions such as opening the widget:

 

Reply