Customisation & Display rules

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

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.
Sample placeholder texts- Search, I need help with, Documentation etc

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.

  • This page is what your end users will see when they open the widget. Could be any page within that given Confluence space.

  • We recommend creating a page that acts as a ‘landing’ or an ‘index’ page, with all the important links within that space.

  • If this is kept empty, end users will land on an empty page or a set of default search results depending on how the widget is triggered.

Search

To define scope of the search in the widget.

  • This applies only when Search is enabled from the widget.

  • Whether the widget should restrict search to children of a certain page or should be across the entire space.

Load page directly

To allow easy access when there is a single search result.

  • This applies only when Search is enabled from the widget.

  • If for the search term, there is a single search result - whether the page should load directly or it should appear as the only search result.

Search pages by

To determine what contents in Confluence are searched for.

  • This applies only when Search is enabled from the widget.

  • Whether search should be based on the entire page ('text’) or only the page title ('title').

Search pages by query matching

To determine what type of query should be used for performing the search.

  • This applies only when Search is enabled from the widget.

  • Available options

    • Whole word matching

    • Wild card matching

Display page titles as links that open in new tab

Whether to display page titles as links or as plain texts.

  • Having this turned on is helpful only when all your end users, who can use the widget, have access to the Confluence space.

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

Configuration

Purpose

Additional info

Widget launcher

To determine how the widget launcher shows.

Available options

  • Question mark icon

  • Info icon

  • Custom text

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

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

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

  • Pixels

  • Percentages

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.