Close Button Content Properties

The Close Button content block allows visitors to close the popup. You can customize its visibility, appearance, position, and what happens when the visitor clicks it.

To learn more about adding and managing content blocks, see Working with Content Blocks.

To configure the Close Button, select it on the canvas in the Design Editor.


Close Button Properties

When you select the Close Button, the properties panel allows you to customize its behavior and appearance.

The available settings include:

  • Visibility
  • Actions
  • Typography
  • Background
  • Borders
  • Shadow
  • Position
  • Edit HTML
  • Products

Visibility

The Visibility settings control where the Close Button is displayed.

  • Desktop — displays the Close Button on desktop devices.
  • Mobile — displays the Close Button on mobile devices.

You can enable or disable each option independently.

For more information about responsive layouts, see Managing Rows and Layout.


Actions

The Actions setting determines what happens when a visitor clicks the Close Button.

Close Button Actions

Choose the action you want the Close Button to perform. For an explanation of the available actions and what each action does for the visitor, see Configuring Element Actions.

Applying an Action

  1. Select the Close Button.
  2. Open the Actions settings.
  3. Choose an action from the dropdown.
  4. Configure any additional options if required.
  5. Click Apply Changes.

Some actions may not require additional configuration.

If you are using the Close Button in a multi-step campaign, see Configuring Campaign Steps.


Typography

You can customize the appearance of the Close Button using the typography settings.

Typography

Available options include:

  • Color — changes the button's text or icon color.
  • Font — selects the font.
  • Weight — controls the thickness.
  • Style — choose Normal or Italic.
  • Size — adjusts the size.
  • Spacing — adjusts text spacing.
  • Line Height — controls the vertical spacing.
  • Alignment — controls the position of the content.

For more information about typography options, see Typography and Text Styling.


Background

Background

Use Background to add a background color to the Close Button.

Select Solid Color and choose the desired color.

For additional background styling options, see Background and Visual Styling.


Borders

Customize the button's border using:

Border Properties
  • Radius — controls how rounded the corners are.
  • Width — controls the border thickness.
  • Style — choose None, Solid, Dashed, Dotted, or Double.
  • Color — sets the border color.
  • Per side — allows individual border settings for each side.

Shadow

Shadow Properties

Use the Shadow settings to add a visual shadow to the Close Button.

You can select an available shadow style or choose Custom for more control.

For more information about styling elements, see Background and Visual Styling.


Position

The Position settings control the placement of the Close Button within the popup.

Use the Top and Right values to adjust its position.

For example:

  • Increasing the Top value moves the button further down.
  • Increasing the Right value moves it further away from the right edge.
Position Properties

For more information about popup positioning, see Popup Design Settings.


Edit HTML

The Edit HTML option provides access to the HTML associated with the Close Button.

Use this option for advanced customization when needed.

Edit HTML

For general information about content blocks, see Working with Content Blocks.


Products

The Products section allows you to associate products with the Close Button.

Click + Add to tag a product or product category when the button is associated with content promoting specific products.

Add Products

For more information about product tagging, see Tagging Products.


Best Practices

When using a Close Button:

  • Keep it easy to find.
  • Make sure it is clearly distinguishable from the popup content.
  • Check its position on both desktop and mobile.
  • Avoid placing it too close to other clickable elements.
  • If your campaign uses stickers, choose the appropriate action described in Configuring Element Actions to keep the campaign accessible after the popup is closed.

For multi-step campaigns, see Working with Stickers and Configuring Campaign Steps.


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.