> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/manual/extensions/floating-widget/configuration.md).

# Configuration

***

### Show floating widget

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`don't show`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget"

**Technical name**:\
`twt-floating-widget-show`

{% hint style="info" %}
Shows the ThemeWare® "Floating/Slideout widget".

To edit or translate the content please use the following snippet: twt.extension.floatingWidget.body
{% endhint %}

***

### Show floating widget @Phone (<768px)

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`don't show`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget"

**Technical name**:\
`twt-floating-widget-mobile`

## Basic configuration

***

### Position

**Field type**:\
Select

**Available values**:\
• left\
• right

**Example value**:\
`left`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-position`

***

### Hover effect

**Field type**:\
Select

**Available values**:\
• no effect\
• pull out\
• reduce opacity

**Example value**:\
`pull out`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-hover-type`

***

### Show overlay (if opended)

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`don't show`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-backdrop`

***

### Show opened (when the page has been loaded)

**Field type**:\
Select

**Available values**:\
• no\
• yes

**Example value**:\
`no`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-show-opened`

***

### Animate (when the page has been loaded)

**Field type**:\
Select

**Available values**:\
• no animation\
• Wobble (3x)

**Example value**:\
`no animation`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-animation`

***

### Link widget

**Field type**:\
Select

**Available values**:\
• no\
• yes\
• yes (open in new tab)

**Example value**:\
`no`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-link`

{% hint style="info" %}
To edit or translate the link please use the following snippet: twt.extension.floatingWidget.link
{% endhint %}

***

### Width (Widget)

**Field type**:\
Number field

**Example value**:\
`400`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-width`

***

### Height (Widget)

**Field type**:\
Number field

**Example value**:\
`300`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-height`

***

### Width (Tab)

**Field type**:\
Number field

**Example value**:\
`200`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-title-width`

***

### Height (Tab)

**Field type**:\
Number field

**Example value**:\
`40`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-title-height`

***

### Padding (Content)

**Field type**:\
Number field

**Example value**:\
`20`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-padding`

***

### Content alignment (vertical)

**Field type**:\
Select

**Available values**:\
• align top\
• align center\
• align bottom

**Example value**:\
`align center`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-align-items`

{% hint style="info" %}
To edit or translate the content please use the following snippet: twt.extension.floatingWidget.body
{% endhint %}

***

### Content alignment (horizontal)

**Field type**:\
Select

**Available values**:\
• align left\
• align center\
• align right

**Example value**:\
`align center`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-justify-content`

{% hint style="info" %}
If the text runs across the full-width of the widget, the alignment has no visual effect.

To edit or translate the content please use the following snippet: twt.extension.floatingWidget.body
{% endhint %}

***

### Distance from bottom

**Field type**:\
Text field

**Example value**:\
`20`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-side-bottom-distance`

***

### Distance from bottom (Unit)

**Field type**:\
Select

**Available values**:\
• % (Percent)\
• px (Pixel)

**Example value**:\
`% (Percent)`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Basic configuration"

**Technical name**:\
`twt-floating-widget-side-bottom-distance-unit`

## Colour configuration

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`#333333`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"

**Technical name**:\
`twt-floating-widget-color`

***

### Link colour

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"

**Technical name**:\
`twt-floating-widget-link-color`

***

### Link colour @hover

**Field type**:\
Color picker

**Example value**:\
`$twt-color-brand-primary-dark`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"

**Technical name**:\
`twt-floating-widget-link-color-hover`

***

### Background colour (Widget)

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"

**Technical name**:\
`twt-floating-widget-background-color`

***

### Text colour (Tab)

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"

**Technical name**:\
`twt-floating-widget-title-color`

***

### Background colour (Tab)

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Colour configuration"

**Technical name**:\
`twt-floating-widget-title-background-color`

## Background-image

***

### Background image

**Field type**:\
Media selection

**Example value**:\
\`\`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Background-image"

**Technical name**:\
`twt-floating-widget-background-image`

***

### Display mode

**Field type**:\
Select

**Available values**:\
• default\
• contain\
• cover

**Example value**:\
`default`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Background-image"

**Technical name**:\
`twt-floating-widget-background-image-object-fit`

{% hint style="info" %}
**none**\
The image is not resized.

**cover**\
The image is sized to maintain its aspect ratio while filling the element's entire content box.

**contain**\
The image is sized to maintain its aspect ratio while fitting within the element's content box. The object will be clipped to fit.
{% endhint %}

## Typography

***

### Font size

**Field type**:\
Number field

**Example value**:\
`16`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Typography"

**Technical name**:\
`twt-floating-widget-font-size`

***

### Font size (Tab)

**Field type**:\
Number field

**Example value**:\
`18`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Typography"

**Technical name**:\
`twt-floating-widget-title-font-size`

***

### Text alignment

**Field type**:\
Select

**Available values**:\
• align left\
• align center\
• align right

**Example value**:\
`align center`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Typography"

**Technical name**:\
`twt-floating-widget-text-align`

{% hint style="info" %}
Text alignment when the text wraps.
{% endhint %}

***

### Text formatting (Tab)

**Field type**:\
Select

**Available values**:\
• none\
• uppercase\
• lowercase\
• capitalize

**Example value**:\
`none`

**Path to the configuration**:\
Tab "Extensions" => Block "Floating widget" => Section "Typography"

**Technical name**:\
`twt-floating-widget-title-text-transform`