Note: The Preference Center Designer is available only for select partners who have updated to Version 2025.03. Eligible partners on an earlier version, will not be able to access this designer.
The Preference Center Designer comes with an updated and refreshing user interface to create responsive Preference Center Pages. Along with a drag & drop designer, it also includes an easy-to-use menus for properties configuration, multi-screen preview ability, customizable themes, and conditional logic.
Follow the steps below to create a Page using the Preference Center Designer.
Step 1: Create a Web Content Record
To create a Click Preference Center with the Preference Center Designer go to Web and Events > New Web Content.
The page to create a Web Content record will appear.
In the new record, enter the following fields:
Name: This is the reference name of the Preference Center. – for example: ‘Click Preference Center’.
Type: Choose 'Subscription'.
Domain: Select a domain you want to use for the Preference Center. Make sure that the Domain record also has the Web Content CNAME field populated - if it is not, please see this article to set that up.
Subscription Editor Type: Choose ‘ Preference Center Designer’
Create New Visitor As: Determines whether a new Contact will be generated in CRM if the email address included in the Posted Subscription does not match any existing records. When an Anonymous Visitor submits their preference and their email address does not already exist in a Contact record in your CRM environment, Click automatically creates a record with the information provided on the Preference Center Page.
Note: By default new visitors will be created as Contact.
Category: This field is required and by default is set to Marketing, but you can select any of the default categories (Marketing, HR, or Other) or add your own custom options to choose from. The value selected here will not display on related Posted Subscription records, but you can still use it reference it in an Advanced Find or Intelligent Dashboards.
Campaign: (Optional) If you link a Campaign to this Preference Center Page record, all associated Posted Subscription records will be linked the campaign you specified. You can view all the Posted Subscription records in the Campaign record.
Lead Generation Form: This field is required and set to Yes by default. You may query on it in an Advanced Find, however, it will not appear on related Posted Subscriptions
Step 2: Save Web Content Record
Once all the required information is entered, click Save.
Step 3: Open the Preference Center Designer
To access the Designer, navigate to a web content record created with Subscription Editor Type ‘Preference Center Designer’ and then click Design.
A window will open with the Preference Center Designer.
Step 4: Configure Page Properties
You can configure the Page properties in the right-hand side panel by clicking the Gear icon on the top right. The properties are grouped in sections as follows:
General
Under the General section you can add Page Title and Description. You can choose to show the Title. Make it Editable or Read-only. In addition, you can also set the responsiveness of the Page and limit to one submission.
Captcha
You can turn Captcha ON/OFF using the Show Captcha checkbox. Please note that Captcha is only shown after you publish the Page. Previewing your Page does not show Captcha.
If you plan to embed your Page as a "widget" on a website which is under a different domain than the domain used to create the Page, then Google Captcha will allow to Post Subscriptions only if a valid SSL certificate is uploaded for the domain/CNAME of that website. For further information on how to upload an SSL certificate click here.
Logo
You can upload a logo of your company and further configure the width and height of the logo in pixel units.
Navigation
In this section you can configure the name and location for page navigation buttons and submit button. You can also show/hide field numbers, configure progress bar and enable/disable table of contents.
Field
In this section you can set how the Fields’ title and description would look. Furthermore, you can configure how error messages should be presented for the Fields.
Data
In this section, you can choose whether and when to clear the hidden question values, when to update text field value, whether to save partial results in progress, and whether to save the "other" option value as a separate property.
Validation
In this section, you can choose when to run validation of user inputs. By default, it is set to Run validation when switching to the next page.
Complete
In this section, you can define the URL to be redirected to when someone updates their Preferences. You can also configure a custom message to show upon Complete.
For more details about Page properties, see our Page Properties article.
Step 5: Add/Remove Fields
Step 5a: Add Fields
You can add a Field by clicking on the New Field button on the Designer Canvas or by simply dragging and dropping the Field into the canvas. While doing so, you can also choose where to place the Field. Once the Field is added to the Canvas, you can also click and drag it to an appropriate location.
Step 5b: Remove Fields
To remove any Field, simply click that Field on the canvas and click the Delete button at the bottom right of the Field.
Note: When you Undo a delete action, only that Field gets added back. All its configuration will be set to default.
Step 6: Configure Field Properties
Each Field comes with a set of Field properties that can be configured separately. Depending on the type of the Field, the settings available to configure may differ. Our Field Types & Properties article covers each Field type and its properties in detail. However, in general, you can configure the following for each Field (depending on its type)
General
In this section you can configure the name, title, and description of a field. You can also configure whether the Field should be visible/hidden, make it a required field or not, and specify the field's data type. Furthermore, you can also put a placeholder text to be shown to the end user, and can edit the auto unmask, clear incomplete, and mask on hover settings.
Choice Options
The Choice Options section is only shown for the Subscription List Field. In this section, you can
- Choose the Subscription Type: Email or SMS (if you use Opt-In configuration)
- Add a Choice for each subscription list you would like to show on your Preferences Center Page.
- The Subscription List dropdown shows Email and SMS Subscription Lists available in the CRM.
- When you choose a Subscription List from the dropdown, by default, the Label and Value will automatically get filled with the name of the Subscription List record. True and False preferences are set to In and Out respectively.
Note: In an Opt-In environment, you can add the Subscription List Field of each type (Email and SMS) only once. However, there is no limit to the number of Subscription Lists that can be added as choices under each Field. Similarly, for Opt-Out environment, you can add the Subscription List Field of Email type once. SMS subscription is not available for this environment configuration.
Layout
The layout section is used to define the look and feel of the Field. You can define how to show the Title and Description. Also, you can configure the size of the field in pixel units.
Data
In this section, you can set a default value for each Field. Simply click a Field and navigate to the Data section and click Set Default Value. A pop-up window opens when you can set an appropriate default value based on the Field type.
Validation
In this section, you can set data to be validated against an expression and if not matched, set an error message to be displayed.
For example, let's say you want to accept submissions only when the email provided is a company email address. One way you can approach this is to set a validation rule to display a "Please enter a company email" error message when someone tries to submit their Preferences with a Gmail or Yahoo address.
To accomplish this, add an Expression to an Email field's Validation rules with the desired error text in the Text field:
Next, click the wand icon in beside the "expression" field to open the expression window:
In the expression window, add conditions to display the error if Email does not contain "gmail", if Email does not contain "yahoo", etc:
Now, when someone tries to submit their Preferences with a gmail or yahoo email address, they will be shown the error text:
Step 7: Add Consent
Optionally, you can add consent to your Page by adding a Consent field at the end of the page.
You can add multiple consent checkboxes using the '+' sign under the Choices section and configure the consent text with hyperlinks using the rich text editor. If Consent field is added to the Preference Center, a response to all of the consent checkboxes are mandatory to submit preferences.
Step 8: Add conditional Logic
The Logic tab displays and allows you to edit logical rules that specify the form flow. Click Add New Rule button in the middle of the Logic tab to display editors that allow you to specify conditions and select actions to perform when these conditions are met.
The rules follow a simple IF-THEN logic that can be defined for each field separately.
If <field1> <condition>
and/or
<field2> <condition>
and/or
…
then <action1>
and <action2>
…
Once you have defined the rule, click Done to save the rule. You can add multiple rules to a Page. Click a rule to expand it and use UI elements to edit the rule. Click Done to save your changes.
Step 9: Customize your Page with Themes
The Themes tab enables you to customize the applied UI theme. You can change colors, sizes, fonts, shadow effects, and other appearance parameters in a user-friendly interface.
You can choose from a list of pre-loaded Themes and/or customize on top of that. Once you finish customization, click Save. Now if you go back to the Themes tab you may notice that the changes have been saved as a Custom Theme. You can Export this Custom Theme to your local machine as a JSON object by clicking the Export button on the top right menu. You can also import any such theme to a different Preference Page or a Form by simply clicking the Import button on the top right menu.
For more details about Themes, see our Themes article.
Step 10: Save all changes
You can save your edits at any stage of the process. Simply click on the Save button to do so.
Note: It is recommended that you Save your progress at frequent intervals and before closing the designer to avoid loss of work.
Step 11: Preview your Preference Center Page
The Preview tab allows you to view, test and fill the Preferences as an end user. Click the Device icon on the top-right and select the desired device from the drop-down menu. You can also click the Orientation icon to switch between the landscape and portrait orientations.
In Preview mode, after you submit your preferences, you can see the preview submission in a table or JSON format. Click the Preview Page Again button above the results to preview the Page again.
Step 12: Add Post Actions to your Page
For Pages created with the Preference Center Designer, Post Actions are moved to the Action Tab on the Subscription Page record. All functionalities remain the same as before.
Step 13: Publish your Page
For Pages created with the Preference Center Designer, Publishing is now moved to in the Ribbon – Publish button. All pages can be embedded as Widget/iFrame or accessed via URL/Custom URL. Publishing allows the page to be hosted on clickdimensions.com domain and become active for receiving submissions.
Embed As Widget
A widget allows the Page to be placed within a page on your website. Place the code snippet on your website within the <body> tags.
Embed As Link
This option will take you straight to the Page on its own page. Use this link in an email or on your website.
Embed As iFrame
This option allows the Web Content to be placed within a page on your website. The iframe code snippet should be placed on your website within the <body> tags.
Custom URL
This option allows the URL to be customized so that its purpose can be made clearer to the user who clicks it.
Active vs Inactive Page
All Pages created using the Preference Center Designer and published are set to Active by Default which means it continues to receive submissions unless explicitly made inactive.
You have the option to set the Page to Inactive in the Publish window.
When an inactive Page is accessed, a warning is message presented to the end user.
| Feature Added: 2025.03 |
Feature Updated: N/A