Default layout
Collapse type
Collapse type
Close type
Close type
Condensed layout
Collapse type
Collapse type
Close type
Close type
Mobile views
Colors for sticky CTA in collapsed state
Red
Red
Black
Black
Default
Default
Variations - Examples
Example 1
Example 1
Style color: Default | CTA size: Default | CTA interaction behaviour: Close | Button: Red
Example 2
Example 2
Style color: Default | CTA size: Condensed | CTA interaction behaviour: Close | Button: Red
Example 3
Example 3
Style color: Default | CTA size: Default | CTA interaction behaviour: Collapsed | Visibility: Open | Button: Red
Example 4
Example 4
Style color: Default | CTA size: Default | CTA interaction behaviour: Collapse | Visibility: Collapsed | Button: Red
Example 5
Example 5
Style color: Red | CTA size: Condensed | CTA interaction behaviour: Collapse | Visibility: Open | Button: Red
Example 6
Example 6
Style color: Dark | CTA size: Default | CTA interaction behaviour: Collapse | Visibility: Open | Button: Red
Example 7
Example 7
Style color: Default | CTA size: Default | CTA interaction behaviour: Collapse | Visibility: Open | Button: Three buttons
How it works
How it works
- The sticky CTA is displayed as an overlay at the bottom of the viewport.
- Up to three links can be integrated
- Component provides two variations of layout
- Default
- Condensed
- Two type of interactions are available
- Close (closing button)
- Collapse (collapsing button)
- The component is not rendered on page load. It is rendered when the visitor scrolls down 250 pixels.
- The Sticky CTA settings are inherited from a parent page, being able to disable or overwrite it if for a particular page (and child pages)
- When clicking on any of the links, the visitor is redirected to the configured page.
- The link list can be collapsed if the visitor clicks back on the button.
- A new option was added for the Sticky CTA to allow choice between different colors for sticky CTA in collapsed state.
Note
Note
If sticky CTA and chat function are activated at the same time (affects pages on UBS Switzerland), make sure that the text in the sticky CTA for mobile view is kept very short.
Reference for publisher
The sticky CTA has to be created as a Experience Fragment
The sticky CTA has to be created as a Experience Fragment
Here you can go to the Experience Fragment Structure.
Select "Experience Fragments"
Select "Experience Fragments"
Navigate to the desired folder in the country structure and create an "Experience Fragment"
Navigate to the desired folder in the country structure and create an "Experience Fragment"
Create and select "Responsive Sticky CTA"
Create and select "Responsive Sticky CTA"
Define layout
Define layout
Integration on the page
Integration on the page
On the page you have to integrate the experience fragment component and then link to the sticky CTA.