Coupon Code Content Properties
The Coupon Code content block allows you to display a promotional coupon in your campaign and let visitors copy the code. You can configure how the coupon behaves, what visitors see, and how the coupon element looks.
The coupon code displayed to visitors is drawn from the coupon pool assigned to the campaign. To learn how to assign a coupon pool to a campaign, see Assign Coupons.
The Coupon Code block includes settings for the overall coupon element as well as its individual components, such as the code input, copy button, and form messages.
For more information about working with content blocks, see Working with Content Blocks.
Visibility
Use the Visibility settings to control where the Coupon Code appears.
- Desktop — displays the coupon on desktop devices.
- Mobile — displays the coupon on mobile devices.
You can enable or disable each option independently.
Actions
The Actions setting determines what happens when a visitor interacts with the Coupon Code element.
For example, you can choose:
- Copy to clipboard — copies the coupon code so the visitor can paste it elsewhere.
The available action may depend on the selected Coupon Code component.
For more information, see Configuring Element Actions.
Require Email to Receive Coupon
Enable Require email to receive coupon when visitors must provide their email address before they can receive or copy the coupon.
When enabled, visitors are prompted to enter their email before accessing the coupon.
This can be useful for campaigns where you want to collect an email address in exchange for a promotional code.
Coupon Content
The Content settings let you customize the text displayed around the coupon.
Placeholder
The Placeholder is displayed in the coupon input field when no coupon code is currently shown.
For example:
e.g. winter20
Button Text
Use Button text to define the text displayed on the copy button.
For example:
Copy code
Success Message
The Success msg is displayed when the coupon has been successfully copied.
For example:
Coupon copied successfully!
Error Message
The Error message is displayed when the coupon cannot be copied.
For example:
Failed to copy coupon. Please try again
Customize these messages to provide clear feedback to visitors.
Coupon Code Styling
The Coupon Code element can be styled using the same design controls available for other content blocks.
For more information about text styling, see Typography and Text Styling.
Typography
Customize the coupon text using:
- Color — changes the text color.
- Font — selects the font family.
- Weight — controls how bold the text appears.
- Style — choose between Normal and Italic.
- Size — changes the text size.
- Spacing — adjusts text spacing.
- Line Height — controls the vertical spacing between lines.
- Alignment — positions the text within the element.
Background
Use Background to add a background color.
Select Solid Color and choose the desired color.
For more information about background and visual settings, see Background and Visual Styling.
Borders
Customize the border using:
- Radius — controls how rounded the corners are.
- Width — controls the border thickness.
- Style — choose from:
- None
- Solid
- Dashed
- Dotted
- Double
- Color — sets the border color.
- Per side — allows individual border settings for each side.
Shadow
Use Shadow to add a shadow effect to the Coupon Code element.
Available styles include options such as:
- None
- Subtle Lift
- Floating Card
- Soft Glow
- Hard Edge
- Dreamy
- Custom
Size
Use the Size settings to control the dimensions of the Coupon Code element.
Height
Adjust the height of the element.
You can also use:
- Full height
- Adjust height to content
Width
Adjust the width of the element.
You can also use:
- Full width
- Hug width
- Adjust width to content
Padding
Use Padding to control the space inside the element.
- V — vertical padding.
- H — horizontal padding.
Position
Use the Position grid to determine where the element is positioned within its container.
Advanced Settings
Additional controls include:
- Rotation — rotates the element.
- H. Offset — adjusts its horizontal position.
- V. Offset — adjusts its vertical position.
- Opening effect — controls how the element appears.
- Z-index — controls its stacking order.
Coupon Code Components
The Coupon Code can contain individual components that can be selected and customized separately.
Code Input
The Code Input displays the coupon code and allows visitors to interact with the code field.
When selected, you can customize its:
- Visibility
- Coupon behavior
- Placeholder
- Button text
- Success message
- Error message
- Typography
- Background
- Borders
- Shadow
- Size
- Spacing
- Layout
The code displayed in the Code Input is provided from the coupon pool assigned to the campaign.
Copy Button
The Copy Button allows visitors to copy the displayed coupon code.
You can customize its appearance and button text while keeping the copy functionality connected to the coupon.
For example:
Copy code
When clicked, the button copies the coupon code to the visitor's clipboard.
Form Messages
The Form Message component displays feedback related to the coupon interaction.
It can be used to show messages such as:
Coupon copied successfully!
or:
Failed to copy coupon. Please try again
You can customize the message's:
- Color
- Font
- Weight
- Style
- Size
- Spacing
- Line Height
- Alignment
- Background
- Borders
- Shadow
- Size
- Layout
This allows success and error messages to match the campaign's visual style.
Products
The Products section allows you to associate products with the Coupon Code element.
Click + Add to tag a product or product category.
Tagged products can be attributed to the campaign, helping connect the coupon with the products it promotes.
For more information, see Tagging Products.
Tip: Assign the appropriate coupon pool to the campaign before using the Coupon Code block. Use a clear coupon placeholder and button label, and provide helpful success and error messages. If the coupon requires an email address, make this requirement clear to visitors before they submit their information.