The customer facing widget can be easily customised to meet your brand identity.
...
Whether you are setting up a new widget or modifying an existing one, a form with all possible configurations (screenshot below) will greet you. In this article, we will understand these configurations in detail.
...
Embedder widgets are available in 3 flavours.
Floating
Pop-up
Inline
All the 3 flavours have a few exclusive configurations and few common ones. The form is structured in this way.
Common for all widget types
Configuration | Purpose | Additional info |
---|---|---|
Name | To identify the widget. | This is for internal reference only & not visible anywhere in the widget to your end users. |
Description | To put up additional specific information about the widget. | This is for internal reference only & not visible anywhere in the widget to your end users. |
Allow search | To enable or disable search in the widget. | If you do not want your end users to be able to search through the widget, then disable this toggle. |
Search box placeholder | To put up a placeholder text in the search box. | Applicable only if Search is enabled. |
Widget labels | To classify the widget for internal structure. | If your team uses a lot of different widgets from the same Confluence space, it can become difficult to easily keep track of them. That’s where widget labels can help. |
Default widget page | To configure ‘Home’ page for the widget. |
|
Search | To define scope of the search in the widget. |
|
Load page directly | To allow easy access when there is a single search result. |
|
Search pages by | To determine what contents in Confluence are searched for. |
|
Search pages by query matching | To determine what type of query should be used for performing the search. |
|
Display page titles as links that open in new tab | Whether to display page titles as links or as plain texts. |
|
Show additional button in footer | To allow for a CTA in the widget. | Some examples for the CTA here - Contact us, Support, Website etc |
Visibility rules | Defines which pages should display or should not display the widget based on url patterns. |
Look & feel for ‘Floating panel’ and ‘Pop-up’
Configuration | Purpose | Additional info |
---|---|---|
Widget launcher | To determine how the widget launcher shows. | Available options
|
Widget launcher text | To determine the text on the launcher button. | Applicable only if widget launcher is set to ‘Custom text’. |
Widget launcher size | Small, Medium or Large. Defines the size of the launcher button. | |
Widget launcher background color | Background color of the launcher button. | |
Widget launcher button text color | Text color of the launcher button. | |
Header background color | Widget's header background color. | |
Header text color | Text color of the widget's header. | |
Footer background color | Widget's footer background color. | |
Footer text color | Text color of the widget's footer. | |
Footer button color | Footer button’s background color. | Applicable only if additional button in the footer is configured. |
Footer button text color | Text color of the button in footer. | Applicable only if additional button in the footer is configured. |
Specific for ‘Floating panel’
...
Configuration | Purpose | Additional info |
---|---|---|
Show widget expanded | If enabled, the widget would be shown in expanded mode at the time of page load. | Useful if you want to grab attention of the audience. |
...
Allow full widget height | If turned on, the widget height can cover the entire area available to it. | |
Widget width % | What percent of available width should the widget take up. | By default set to 40% but you can configure upto 80%. This will dictate width of the widget in context of the page it is being displayed in. |
Specific for ‘Inline Embed’
Configuration | Purpose | Additional info |
---|---|---|
Show header | Whether to display header for the widget. | This config exists for Inline embed type since only in this mode it makes sense to hide the header & make the widget appear like a seamless part of the main web page. |
Show footer | Whether to display footer for the widget. | This config exists for Inline embed type since only in this mode it makes sense to hide the footer & make the widget appear like a seamless part of the main web page. |
Show iframe border | Whether to display iframe border or not. | |
Dimensions in | What unit to use for the next two configurations. | Available options
|
Widget height | Height of the widget. | |
Widget width | Width of the widget. |
Once the configurations are saved, the page will reload and 3 different code snippets will appear for 3 different widget types. Use the one that is relevant to you.