cta-sticky-button

Component displaying a cta-button for proceed to checkout page. Displays price, pax and number of nights

The CTA button MFE listen to custom events from selected offer and displays it providing next step too checkout. Always visible on a Hotel detail page.

Screenshots

CTA button look

Usage

Add the following script tag to your web page to load the microfrontend. Note: This is required only once per webpage, even when you embed multiple instances of the microfrontend.

<script src="https://nonprod.cloud.tui.com/osp/ao/ui/cta-button/current/cta-sticky-button.esm.js" defer></script>

Add the following HTML code anywhere in your webpage at the position where you want the microfrontend to show. You can create multiple instances of the microfrontend.

<tui-cta-sticky-button
	locale="VALUE"
	show-price-per-night="VALUE"
	step-three-url="VALUE"
	step-two-url="VALUE">
</tui-cta-sticky-button>

Examples

• Basic example

  <tui-cta-sticky-button
  	locale="sv-SE"
  	current-step="0"
  	step-two-url="/hotels/step-two/"
  	step-three-url="/hotels/step-three/"
  	price-format="price">
  </tui-cta-sticky-button>

Attributes

This microfrontend accepts the following attributes:

Events

This microfrontend emits the following events:

type: boolean