Capture customer information beyond email for more informed segmentation and personalization by hosing a preference center on your site. Preference Centers can collect additional explicit information about your customers, such as category interests, mailing frequency and subscription status, and birthday information. Use this information to send highly personalized and relevant messages with this data, catering to their indicated preferences.
This article outlines how you can set up and launch a preference center campaign via self-service if you were previously using Bluecore's preference center solution. Please contact your PM/CSM to get started with preference center.
GETTING STARTED
Bluecore’s preference center is hosted by existing Bluecore JavaScript on a URL provided by you. Build a preference center form using the Bluecore’s Visual Template Editor (VTE). Below is an overview of the process:
Create a live production website for the preference center to be hosted on
Build a campaign using VTE
Create a campaign using the email capture form widget
Add additional layers to the email input form to capture additional customer information
Configure an unsubscribe or opt-down element to the campaign
Add additional widgets to the campaign to show relevant content and designs
Set up the campaign with the Selector ID to determine where the campaign is displayed
Publish the campaign to the live URL
BUILDING A PREFERENCE CENTER
Build a preference center form quickly and easily using Bluecore’s Visual Template Editor. Add different elements such as fields and buttons, and set distinct formatting, information requirements, and validation options for the information that’s being submitted through the form.
Before building the campaign, please have the following items ready that are necessary to setup a preference center.
Website URL: Bluecore will not create or host the webpage for the preference center. This must be previously created and the placement of the campaign is identified with the Selector ID. Use this URL to target the specific webpage when configuring the targeting rules for the campaign.
Selector ID: Bluecore requires a CSS selector to inject the campaign creative within the website. This CSS selector finds the HTML elements of the website that you want to style. The selector ID should be unique and present only once on the page.
Start building a campaign by following the below steps.
Navigate to the flag icon on the left-hand navigation.
Go to Communicate
Then Preference Center Campaigns.
Click New in the upper right-hand corner.
Then, click Campaign.
Enter a Name for the campaign.
Then, Click Save & Continue in the lower right-hand corner.
TARGETING
1. Select desktop or mobile device to display the campaign on.
2. Create the targeting rules from existing or create a new rule.
TIP: Create a URL based condition in the targeting rules that is specific to the URL where the preference center will be hosted.
3. After a targeting rule has been created, click Save & Continue in the lower right-hand corner.
MESSAGE
Next, select to create the campaign by using VTE, as outlined below.
Add a layer to the canvas.
Configure the overlay settings of the campaign. These are settings that are applied to every screen and layer of the campaign.
EMAIL CAPTURE FORM
Drag and drop the email capture form widget onto the canvas. This widget automatically creates an email capture input and a submit button. Configure each layer with the below sections.
EMAIL CAPTURE INPUT
The email capture input is the layer where the email address is entered from a customer.
Label Design
Select either to show or hide the label. This is an additional and optional field that can appear above or near the below input field.
Label Text: Enter text here to describe what a user needs to enter into the text box.
Custom CSS Class Name: Add a class name here to automatically add to the CSS layer.
Editing Options: Color, size, font, decoration, text transform, height, and letter spacing.
Field Design
This section is the area where the user enters their information.
Custom CSS Class Name: Add a class name here to automatically add to the CSS layer.
Accessibility Label: A concise but useful description for shoppers with visual impairments or who otherwise use assistive technology.
Required: Determine if entering information here is required.
Placeholder Text/Color: Enter copy here to guide your users into what to enter into the text box.
Editing Options: Color, size, font, decoration, text transform, letter spacing, background color.
Padding: Left and right (pixels).
Border: Select a style, color, thickness, radius, and container color.
Position
You can drag and drop the element on the canvas on the right-hand side, or apply any of the below position options.
Left and Top Position: Enter a percentage of left and top alignment.
Layer Alignment: Select auto, left, center, or right alignment on the layer.
Stick to side: Offset the element to a specific side (pixels).
Animation
Animation Effect: Catch the users attention by selecting an animation for the text. Enter a start delay and a speed for the animation.
SUBMIT BUTTON
The email capture button is the actionable button that allows customers to submit their information into the preference center. Configure the design with the below options.
Design
This is the button that a customer clicks to submit their information to Bluecore.
Custom CSS Class Name: Add a class name here to automatically add to the CSS layer.
Accessibility Label: A concise but useful description for shoppers with visual impairments or who otherwise use assistive technology.
Use Button Editor/Use Image URL: Customize color (font and background), size, font, decoration, text transformation, height, and letter spacing, or use an image for the button.
Position
You can drag and drop the element on the canvas on the right-hand side, or apply any of the below position options.
Left and Top Position: Enter a percentage of left and top alignment.
Layer Alignment: Select auto, left, center, or right alignment on the layer.
Stick to side: Offset the element to a specific side (pixels).
Animation
Animation Effect: Catch the users attention by selecting an animation for the text. Enter a start delay and a speed for the animation.
CONFIGURING ADDITIONAL LAYERS
When building a preference center, you can add additional layers to the canvas to ask your customers for more information about themselves or their email preferences. These layers are the same basic components that are available when configuring an on-site campaign. Add any of the following layers to a preference center campaign:
Text
Images
Dividers
Coupons
Call-to-action Button
Close Button
Next Screen Button
SMS Capture Form
Timer
Spinner
Smart Content
Some of the above elements (as explained below), can be used to capture specific information or preferences about your customers. Read more below about how to configure these actions to be recorded into Bluecore.
CONFIGURING THE PREFERENCE CENTER CAMPAIGN
The next section outlines how to configure this information to be sent to Bluecore and updated for customer preferences or subscription status.
1. Once the preference center campaign has been set up with the applicable inputs, click Add Layers+ to add an additional layer.
2. Drag and drop the unsubscribe widget onto the canvas where the preference center has previously been setup.
3. When configuring a campaign with any of the additional layers mentioned below, please be sure to configure the name of the layer that’s being added. The name field allows you to select a previously configured customer attribute. You can also create additional attributes here (if you’re creating an attribute that requires spaces, please use _ in the place of a space).
4. In addition to configuring a customer attribute, you also have the option to select if this preference is eligible for list unsubscribe via NQE. Selecting this option results in the following: when customers are brought to the preference page from an email campaign and still choose to unsubscribe, Bluecore correlates the unsubscribe to the original email form which they clicked.
The below fields can be configured for a subscription or preference status update.
Check of a checkbox
Uncheck of a checkbox
Selection of a radio button
Deselection of a radio button
Clicking on a Link within the preference center
Selection of an option in a drop-down
Read more below about how a checkbox, radio button, drop-down, and text unsubscribe layer options are configured.
CHECKBOX
A checkbox can be used to allow customers to make multiple choice selections about their preferences instead of a yes/no. For example, two checkboxes indicating a daily and monthly cadence of email sends. If the customer doesn’t select either of these, Bluecore will unsubscribe them from receiving any further emails.
In the below example, an unchecked checkbox event type is configured for both of the checkboxes.
RADIO BUTTON
Use a radio button to allow customers to make a one or the other decision. For example, if a customer selects Block Me, Bluecore will unsubscribe them from receiving further emails. They cannot choose to still receive emails with a radio button decision point.
After you’ve configured the content for the radio buttons, navigate to the unsubscribe settings to select the event and radio button for the preference:
DROP-DOWN
A drop-down menu could be used for an unsubscribe to offer your customers a wider variety of choices with marketing frequency. However, this option only allows a customer to select a single option. If a customer selects the Unsubscribe Me option, they will be unsubscribed from all marketing emails.
ADDING A TEXT LAYER
Configure an unsubscribe link by using the text layer in the canvas to add a previously configured unsubscribe URL.
Add a text layer to the canvas.
Add a link to the applicable text to allow users to click to unsubscribe or update email preferences.
Additionally, configure the label design, field design, position, animation, and validation for the text layer.
Then, Save the text layer.
Add the unsubscribe widget to the campaign.
Navigate to the Unsubscribe Settings and select the Click on Link - Text Layer event.
Select the layer that contains the previously configured unsubscribe URL and select it from the drop-down menu. In the above example, the Unsubscribe Me layer consists the required URL and hence the same has been selected.
MULTIPLE UNSUBSCRIBE OPTIONS USING THE OR OPERATOR
It is possible when creating a preference center campaign that there are multiple ways to unsubscribe or indicate opt-down preferences resulting in an unsubscribe from emails. In this scenario, configure all of the unsubscribe events with an OR operator to allow customers to complete any of the events to result in an unsubscribe.
SELECTOR ID
After the preference center is designed and configured, the next step is enter the selector ID for the applicable HTML element for the campaign to display.
Bluecore requires a CSS selector to inject the campaign creative within the website. This CSS selector finds the HTML elements of the website that you want to style. The selector ID should be unique and present only once on the intended page.
NOTE: If the selector ID is present more than once, Bluecore will not show the campaign to ensure the same creative is not displayed twice on the website.
Locate the selector ID by following the below steps.
Open the developer tools in the web browser.
Click the selector icon.
Select the element on the page by clicking on it. The elements tab will now show the selected element.
4. Copy the Div ID/Class Name to find the number of occurrences of the selector on the page. If this is only used one, the selector can be used to show the inline campaign.
If you’ve copied a DIVD ID, append a # (hash) before the selector, as shown in the bottom of the screenshot.
If you’ve copied a class, append a . (dot) before the selector, as shown in the bottom of the screenshot.
5. Paste the selector ID into Bluecore on the preference center configuration screen.
After the selector ID has been added, the next step is to decide if it should be prepended, appended, or replaced. Learn more about each of these below.
Prepend: This option adds the creative before the selector that is provided above.
Append: This option adds the creative after the selector that is provided above.
Replace: This option replaces the creative with the selector that is provided above.
You can now save and launch the campaign to set the preference center live!