# 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`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.themeware.design/manual/extensions/floating-widget/configuration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.