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

Shows the ThemeWare® "Floating/Slideout widget".

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

---

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

To edit or translate the link please use the following snippet: twt.extension.floatingWidget.link

---

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

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

---

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

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

---

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

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.

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

Text alignment when the text wraps.

---

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