Call to Action

Understanding the CTA component

Natália Pauletto Fragalle avatar
Written by Natália Pauletto Fragalle
Updated over a week ago

Summary

This article covers the following topics with regards to call to actions (CTAs):

See below how to style and edit a call to action using the Campaign Builder Beta.


1. Action types

The call to action (CTA) is a staple of any campaign and can be used for a variety of reasons, such as making a purchase, signing up for a newsletter, or contacting a business.

The actions we have available are listed below:

  • Redirect to URL – Sends users to a specific URL.

  • Dismiss experience – Closes the campaign.

  • Open in a New Tab – Opens a new tab in the current browser with the URL added within this field.

  • Call Number – Calls the number that is listed within this field. This option is only available on the mobile version of the campaign.

  • Redirect to Dynamic URL – Sends users to a URL generated by parameters from the page (contact your CSM to discuss this action in more detail).

  • Submit – Submits details from a form.

  • Next – Sends users to the next stage of a campaign (only applicable to multi-stage campaigns).

  • Submit & Next – Submits details from a form and sends users to the next stage of a campaign.

  • Submit & Dismiss – Submits details from a form and closes the campaign.

⚠️ Keep in mind that forms are not currently supported by the Campaign Builder Beta. The options to submit details from a form are therefore only available on the Legacy version of the Campaign Builder. This article will be updated once those options are enabled.


2. Advanced actions

Within the component, there are further options to configure your CTA that can be enabled via our Technical Solution Engineers:

  • Advanced Action – Custom Action: The custom action can be used by our Technical Solution Engineers to do everything from click tracking to adding items to a bag, to generating coupons. Contact your CSM if you want to discuss a use case for the Custom Action.

  • Advanced – Click on Element: Replicate the click functionality of any element on the page. Contact your CSM if you want to emulate a webpage element using a CTA.


3. Call to action templates

Work quickly with templated versions of CTAs available on the Call to action templates section of the CTA properties panel.


4. Background image upload

To upload an image to use as background for your CTA, go the Background image upload section on the Call to action properties panel.

⚠️ When the Accessibility Compliance mode is on, it is not possible to upload GIFs as background images. To learn more, visit the Accessibility Basics help article.

By default, the CTA is set to contain the background image, meaning that the entire image will be visible within the container, and it will not be cropped or distorted.

  • The image will be scaled down or up, depending on the size of the container, in order to fit entirely within the container while maintaining its aspect ratio.

  • This means that there may be empty space (background color or transparency) in the container if the image aspect ratio doesn't match the container's aspect ratio.

Once an image is uploaded, it is possible to replace it by a different file. Downloading the image back to your device or deleting it will revert the CTA background to a solid color.


5. Text styling

You can style a CTA text using the same editor of the rich text component.

Double-click the text to open the text editor:

To learn more about the text editor styling capabilities, read the help article on the In-line Rich Text component.


5. Fill and border properties

It is possible to change color, border and corner radius of a text box on the Fill and border section of the Call to action properties panel.

Did this answer your question?