Uberflip Marketplace

The CTA Customizer app allows for customizations of all CTAs (link and form) on top of what is available in the Call-To-Action page in the hub. Available are common Onbrand customizations that is now all manageable in one app without needing to code in the Custom Code section.

NOTE: CTA tile corner rounding is not customized in this app, please see Tile Customizer app.

Features:

• Text spacing
• Rounded button corners
• Button padding (sizing)
• Multi-level text
• Custom Form CTA labelsAll features can be targeted to all CTAs, or can be applied to only specified CTAs. Each feature can also be toggled to not be applied to form CTAs.

IMPORTANT: This app customizes the CSS of Link and Form CTAs in your Hub(s). If you are running custom code that also affects these elements, conflicts can occur which may result in unexpected behavior. Before you use this app on publicly visible CTAs in your Hub, we strongly recommend testing your customizations on non-public CTAs that you have created for this purpose.

How to use this app

CTA Customizer can apply a variety of appearance modifications to Form and Link CTAs. To use this app with your CTAs, simply install it, then enable and configure the settings for the modifications you want to use (see below for details).

Configuring CTA Customizer settings

You can configure settings for CTA Customizer at both the account level and the Hub level:

• Settings at the account level will apply across all Hubs within your Uberflip account
• Settings at the Hub level will apply to that Hub only, and will override any existing account level settings for that Hub

See this Uberflip Help article for detailed instructions on where to find and configure app settings for Uberflip Marketplace apps at the account and Hub levels.

For CTA Customizer, you can configure the following settings:

Specific CTAs Only

By default, CTA Customizer will apply the customizations you set to all of your CTAs. Turn this setting on if you want customizations to be applied only to CTAs you've selected.

TIP: This setting is also useful for limiting your customizations to a small number of test CTAs before you go live.

Specific CTAs Only: CTAs to customize

If you have turned on the Specific CTAs Only setting, use this field to specify which CTAs the customizations should be applied to. 

• To add a CTA, enter its CTA ID. Separate multiple CTA IDs with a comma, e.g. "123456,098765".
• If you do not enter any CTA IDs here, and Specific CTAs Only is turned on, the app will not apply customizations to any CTAs.

Add Letter Spacing

Turn this setting on to add a customizable amount of spacing between each letter in all CTA text.

Add Letter Spacing: Exclude Form CTAs

Turn this setting on if you do not want to apply Add Letter Spacing settings to Form CTA text (i.e. apply to Link CTA text only).

Add Letter Spacing: Set letter spacing amount

If you have turned on the Add Letter Spacing setting, use this field to set the amount of space to add between letters. 

• Enter the spacing distance in pixels, e.g. enter 2 to insert 2 pixels of space between letters.
• If you do not specify a spacing amount here, the Hub's default letter spacing will be used.

Change Button Text Size

Turn this setting on to customize the size of the text on CTA buttons (i.e. the link button on Link CTAs, and the submit button on Form CTAs). 

Change Button Text Size: Exclude Form CTAs

Turn this setting on if you do not want to apply Change Button Text Size settings to Form CTA buttons (i.e. apply to Link CTA buttons only).

Change Button Text Size: Set text size

If you have turned on the Change Button Text Size setting, use this field to set the desired size for button text. 

• Enter the text size in pixels, e.g. enter 15 to display button text as 15 pixels high. 
• If you do not specify a text size here, the Hub's default button text size will be used.

NOTE: If you use this customization, test CTAs on multiple window sizes (desktop, mobile, etc.), as some text sizes may not display correctly on all breakpoints.

Rounded Button Corners

By default, the corners of CTA buttons are right angles. Turn this setting on if you want these corners to look rounded instead. You can choose to round all or only specified corners, as well as set the amount of rounding to be applied to each corner individually.

Rounded Button Corners: Exclude Form CTAs

Turn this setting on if you do not want to apply Rounded Button Corners settings to Form CTA buttons (i.e. apply to Link CTA buttons only).

Rounded Button Corners: Set corner radius

If you have turned on the Rounded Button Corners setting, use this field to set the desired radius of the button corners (how round to make the corners). 

• Enter one or more radius values, using CSS border-radius property formatting (but do not enter a ";" at the end of a value). 
• You can use any CSS length unit (e.g. as px, pt, em, % etc.) to specify a radius.
• You can enter one, two, three, or four radius values. Separate multiple values with a space.
  • One value (e.g. 15px): Applies the same radius to all corners equally.
  • Two values (e.g. 15px 50px): Applies the first value to the top-left and bottom-right corners, and the second value to the top-right and bottom-left corners.
  • Three values (e.g. 15px 50px 30px): Applies the first value to the top-left corner, the second value to the top-right and bottom-left corners, and the third value to the bottom-right corner.
  • Four values (e.g. 15px 50px 30px 5px): Applies the values in clockwise direction, starting from the top-left corner.

NOTE: You can also enter a value of 0 in any position to apply no rounding to the corresponding corner. For example, 0px 15px 0px 15px would result in only the top-right and bottom-left corners being rounded.

Change Button Padding

Turn this setting on to modify the padding (amount of space) around the text on CTA buttons, to adjust the overall button size. You can choose to add padding to all or only specified edges, as well as set the amount of padding to be applied to each edge individually.

Change Button Padding: Exclude Form CTAs

Turn this setting on if you do not want to apply Change Button Padding settings to Form CTA buttons (i.e. apply to Link CTA buttons only).

Change Button Padding: Set padding amount

If you have turned on the Change Button Padding setting, use this field to set the desired amount of padding (how much space to add on each edge of the button). 

• Enter one or more padding values, using CSS padding property formatting (but do not enter a ";" at the end of a value). 
• You can use any CSS length unit (e.g. as px, pt, em, % etc.) to specify padding.
• You can enter one, two, three, or four padding values. Separate multiple values with a space.
  • One value (e.g. 25px): Applies the same padding to all edges equally.
  • Two values (e.g. 25px 50px): Applies the first value to the top and bottom edges, and the second value to the left and right edges.
  • Three values (e.g. 25px 50px 75px): Applies the first value to the top edge, the second value left and right edges, and the third value to the bottom edge.
  • Four values (e.g. 15px 50px 30px 5px): Applies the values in clockwise direction, starting from the top edge (top/right/bottom/left).

Multi Level Text

By default, Tagline/Copy text on CTAs is displayed as a continuous string of next, with the same formatting for all lines (and automatic line breaks). Turn this setting on to split text into separate levels (sections) at points you specify: each level will be on its own line (or multiple lines, as needed to fit), and you can optionally apply separate formatting to each level.

TIP: See the gallery for examples of what this can look like.

How to use Multi Level Text

When the Multi Level Text setting is turned on, and you have set a separator character (see below), you can split the CTA Tagline/Copy text for any CTA into different levels. If you have also set up text customizations, these will be applied to each level as configured.

To split text into separate levels, simply insert the separator character in the CTA Tagline/Copy text wherever the text should be split. You do not need to insert any spaces on either side of the separator. 

For example, if the CTA Tagline/Copy text is "Lorem ipsum dolor sit amet" and your separator character is %%, you could split it as follows: "Lorem ipsum%%dolor%%sit amet". This would result in three levels, like this:

Lorem ipsum

dolor

sit amet

You can create as many levels as needed by simply inserting the appropriate number of separator characters. However, keep in mind that the normal character limits for CTA Tagline/Copy text still apply, and that the separator character(s) count towards this limit.

Multi Level Text: Exclude Form CTAs

Turn this setting on if you do not want to apply Multi Level Text settings to Form CTA text (i.e. apply to Link CTA text only).

Multi Level Text: Set separator character

If you have turned on the Multi Level Text setting, use this field to set the character (or combination of characters) that you will use to designate where to split text into separate levels.

• Enter one or more characters that, when inserted into CTA Tagline/Copy text, will insert a level "breakpoint" at that position. If you use multiple characters, do not put a space between them.
• We recommend using a combination of at least two characters that you would never normally use in CTA Tagline/Copy. Multi-character separators can be the same character multiple times, or any combination of characters. e.g. %%, $&, ^!, or similar.
• You can also use a single character, however this increases the risk of creating breakpoints accidentally if the selected character is used as part of regular CTA Tagline/Copy text. Note also that the specified separator character (or combination of characters) will always be hidden when the CTA is displayed.

Multi Level Text: Set text customizations

If you have turned on the Multi Level Text setting, use this field to specify text customizations to apply to each level. You can individually customize the font size, font weight, and bottom margin of the text in each level.

NOTE: This setting is optional. If you do not specify any text customizations here, CTA Tagline/Copy text will still be split into levels if the Multi Level Text setting is turned on, but all levels will use the Hub's default text formatting.

• Enter text customization values using this format: ['font size', 'font weight', 'margin bottom']. Put each value within single quotes ('value'), and enclose a "set" of values with square brackets ([ and ]).
  • Font size values: Use any accepted value for the CSS font-size property, e.g. px, %, large, etc.
  • Font weight values: Use any accepted value for the CSS font-weight property, e.g. normal, bold, 500, etc.
  • Margin bottom values: Use any accepted value for the CSS margin-bottom property, e.g. px, em, %, etc.
  • You can also specify a blank (two single quotes within nothing between them, i.e. '') for any value to use the Hub's default formatting for that value. Likewise, any values not specified in a set will be set to the Hub's default formatting.
• Each "set" of values within square brackets applies only to a single level. Specify customizations for multiple levels by adding multiple sets, separated with a comma (no space), i.e.: ['font size', 'font weight', 'margin bottom'],['font size', 'font weight', 'margin bottom'],...
  • When you add multiple sets, these are applied to any available levels in CTA Tagline/Copy in order, i.e. the first set is applied to level one, the second set to level two, and so on. 
  • If there are more sets than levels in a given CTA Tagline/Copy text, the extra sets are simply ignored. 
  • If the CTA Tagline/Copy text has more levels than there are specified sets, any levels without specified customizations will be displayed using default formatting.

Examples

• ['20px', '700', '5px']: Makes the text for this level 20 pixels high, with a font weight of 700, and a margin below the text of 5 pixels.
• ['100%', '', '2px']: Makes the text for this level 100% of normal size (i.e. default height), using default font weight, and a margin below the text of 2 pixels.
• ['90%']: Makes the text for this level 90% of normal size. Because font weight and margin bottom are not specified, these will use Hub default formatting.

Replace Form CTA Labels

Turn this setting on to replace specified field labels on all Form CTAs with custom field labels of your choice.

Replace Form CTA Labels: Set custom labels

If you have turned on the Replace Form CTA Labels setting, use this field to specify the default field label text you want to replace, and the custom text you want to display instead.

• Enter the default label and the desired custom label text using this format: ['Default Label', 'Custom Label']. Put each default and custom label value within single quotes ('value'), and enclose a "set" of default and custom values with square brackets ([ and ]).
• For example, to replace the default label Email with the custom label Your Email: ['Email', 'Your Email']
• Each "set" of values within square brackets defines a single replacement rule. Specify multiple replacement rules by adding multiple sets, separated with a comma (no space), i.e.: ['Default Label', 'Custom Label'],['Default Label', 'Custom Label'],...

NOTE: Replacements specified here will be applied to the field label text on Form CTAs only. Text on Link CTAs, and text elsewhere on a Form CTA (CTA Tagline/Copy and button text) will not be replaced.