Call to Action - Berrario UI Library

Autoload Component

The

Autoload - Call to Action

component lives inside

Global

, so updates to the component apply across the site. Ensure that

Global

is placed on every page where the Call to Action is required.

Choose the Modal or Popover system based on the desired CTA layout and behavior, then place its structure inside the

Autoload - Call to Action

component. This allows the CTA to load automatically while keeping the modal or popover behavior controlled by its own documented system.

The page load animation is controlled under Autoload in the Interactions (X) panel. The interaction should target either b-modal-target = autoload-cta or b-popover-target = autoload-cta, depending on the selected system. When the page loads, the interaction adds is-open and on-enter to the targeted element to make it visible and play the entrance animation.

Autoload - Call to Action

CTA Popover

Call to Action layout that uses the Popover system to present a page-load prompt, form, or conversion message in a flexible overlay format. For full setup instructions, visit the Popover page.

Important: The popover-navigation is-autoload-cta class combination controls the position of the autoload CTA. Place the CTA layout inside this container so its position remains controlled by the Popover system. Once the layout is complete, place the finished Popover component inside the required Autoload component.

System Container

popover-navigation

is-autoload-cta

b-popover-target = autoload-cta

Note: Element is hidden by default.

Interaction States
Control how elements become visible and how their entrance and exit animations run. If no changes are made, the default Popover setup will be used.

Menu Open

popover-navigation

is-autoload-cta

is-open

Menu Enter Animation

popover-navigation

is-autoload-cta

is-open

on-enter

Menu Exit Animation

popover-navigation

is-autoload-cta

is-open

on-enter

on-exit

Layouts
Choose a layout, then place it inside the popover-navigation is-autoload-cta element within the System Container.

The attribute b-autoload-cta = dismiss is added to the close element that contains the "Don't show again" text.

Add the attribute b-autoload-cta = redirect-form to the form-content element when the form redirects to another page or URL. This allows the custom behavior to detect the redirect and save the dismissed state correctly.

CTA Modal

Call to Action layout that uses the Modal system to present a focused page-load prompt, form, or conversion message. For full setup instructions, visit the Modal page.

Important: For floating layouts, place modal-layout, including its content, inside modal-navigation and next to modal-backdrop, so both elements remain at the same level within the system structure. For full-screen layouts, place modal-layout, including its content, directly inside modal-navigation. Once the layout is complete, place the finished Modal component inside the required Autoload component.

System Structure

Floating

modal-navigation

is-open

on-enter

on-exit

|

modal-backdrop

|

modal-layout

Full Screen

modal-navigation

is-open

on-enter

on-exit

|

modal-layout

b-modal-target = autoload-cta

Note: Element is hidden by default.

Layouts
Choose a layout, then place it inside the modal-navigation element within the System Structure.

modal-layout

Floating

Full Screen

The attribute b-autoload-cta = dismiss is added to the close element that contains the "Don't show again" text.

Add the attribute b-autoload-cta = redirect-form to the form-content element when the form redirects to another page or URL. This allows the custom behavior to detect the redirect and save the dismissed state correctly.

Custom Behavior -

Call to Action

Call to Action Autoload

Automatically displays the Call to Action component using the page-load interaction until the visitor dismisses it.

When the visitor clicks the close button, the code saves the dismissed state in the browser. On future page loads, it hides the component and removes the autoload attribute before the page-load interaction can run.

‍

Component Attribute

Add the following attribute to the complete Call to Action component: b-modal-target = autoload-cta or b-popover-target = autoload-cta

This identifies the component that should load automatically when no saved dismissed state exists.

‍

Close Button Attribute

Add the following attribute to the exit button inside the component: b-autoload-cta = dismiss

When clicked, this button saves the dismissed state and prevents the component from loading again.

‍

Standard Form Submission

When a standard form inside the Call to Action is submitted successfully, the code detects the visible success message and saves the dismissed state automatically.

No additional attribute is required for forms that display the standard success and error states.

If the form displays an error message, the dismissed state is not saved and the Call to Action can load again on a future visit.

‍

Redirect Form Submission

Add the b-autoload-cta = redirect-form attribute to the form-content element that redirects the visitor to another page after submission.

Redirect forms do not display the standard success message before the new page loads. This attribute allows the code to save the dismissed state when a valid form submission begins.

Because the form redirects immediately, the code cannot confirm the final server response before saving the dismissed state.

‍

Form Placement

The form and its success message must be placed inside the element using either b-modal-target = autoload-cta or b-popover-target = autoload-cta.

This allows the code to connect the form submission to the correct Call to Action component.

‍

Interactions

The entrance and exit animations are controlled in the Interactions panel.

The page-load interaction should target b-modal-target = autoload-cta or b-popover-target = autoload-cta.

The exit button can also have a click interaction that visually closes the component. The code allows time for this animation to complete before hiding the component as a fallback.

‍

Saved State

The dismissed state is stored in the visitor’s browser using localStorage.

Storage key:

b_cta_closed

The Call to Action component will remain hidden on future visits in the same browser unless this saved value is cleared.

Required Custom Behavior

Supporting custom behavior components required for this system to function correctly. These components are nested within

Global

so updates can be managed from one central location. Any edits made below will automatically apply across the site.

Custom Behavior -

Form

Text Area Wrapper Focus Sync‍

Add a custom CSS style rule for the textarea wrapper focus state.

When a textarea inside form-input is-textarea-wrapper is focused, the wrapper should receive the focus styling instead of the textarea itself.

Use on form-input is-textarea-wrapper so the wrapper can detect when an inner textarea is active. Set the wrapper border-color to currentColor during focus.

This allows the focus color to follow the wrapper’s text color.

The final CSS should target: form-input is-textarea-wrapper

And apply:
border-color: currentColor;