Note: The Preference Center Designer is available only for accounts using the Click UCI (Unified Client Interface) application who have updated to Version 2025.03 or later. Eligible partners with Click On-Premises/Online using the Classic Interface, or those on an earlier version, will not be able to access the Preference Center 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 easy-to-use menus for properties configuration, multi-screen preview ability, customizable themes, conditional logic, and a JSON Editor.
Follow the steps below to create a Page using the Preference Center Designer.
Step 1: Create a Web Content Record
To create a 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 this 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 Lead or Contact will be generated in Dynamics 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 Lead or Contact record in your Dynamics environment, Click automatically creates a record with the information provided on the Preference Center Page.
Note: If 'Create New Visitor As' is left blank, by default new visitors will be created as Lead
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 your Subscription Page, all associated Posted Subscription records will be linked the Campaign you specified. You can view all of a Campaign's associated Posted Subscriptions from within the Campaign record.
Lead Generation Form: This field is required and set to Yes by default. Its primary purpose is for use in Intelligent Dashboards but 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
Once the record has been saved, you are able to 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.
Upon clicking Design, the Preference Center Designer window will open.
Step 4: Configure Page Properties
The Preference Center Designer's Page properties are located in the right-side panel. Click each icon to access different properties sections. The Show Panel/Hide Panel icon at the top will expand and collapse the properties panel.
The Preference Center Designer contains Page Properties sections for: General, Captcha, Logo, Navigation, Field, Conditions, Data, Validation, and Complete. This article gives an overview of each section. Full details of the Preference Center Designer's Page Properties are located here.
General Properties
The General Properties section allows you to specify a Page Title and Description. You can choose to show or hide the Title, choose whether the Subscription Page is editable or read-only, and set the page width mode.
Captcha Properties
The Captcha Properties section allows you to show or hide the Captcha.
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 Subscription Page as a widget on a website under a different domain than the domain used to create the Subscription Page, then Google Captcha will allow submissions 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 Properties
The Logo Properties section allows you to upload a logo to display within your Subscription Page. You can configure the logo width, height, and fit sittings.
Navigation Properties
The Navigation Properties section allows you to configure the complete/submit button text, as well as set the navigation button and progress bar alignment.
Field Properties
In the Field Properties you can set how the Field titles and descriptions will look, and can configure how field-level error messages should be presented.
Conditions Page Properties
In the Conditions Properties, you can create custom variables and triggers for use in conditional rules in your Subscription Page.
Data Properties
The Data Properties section allows you to choose when to clear hidden field values and when to update text field values.
Validation Properties
The Validation Properties section allows you to choose whether to set focus on the first invalid answer, and when to run validation of user inputs. By default, it is set to run validation when switching to the next page.
Complete Properties
The Complete Properties section allows you to control what a user sees after submitting the Subscription Page. You can provide a URL for users to be redirected to after updating their preferences, or you can provide custom markup to be displayed upon submission.
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. Depending on the type of 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 Field Properties
In the General Field Properties section you can configure the name, title, and description of a field. You can also configure whether the field should be visible/hidden, read-only, or required, as well as specify the field's data type. You can also provide placeholder text to be shown to the end user, and can toggle the field title and description visibility.
Choice Options Field Properties
The Choice Options Field Properties section is only shown for Subscription List Fields. 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 Field Properties
The Layout Field Properties 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.
Conditions Field Properties
The Conditions Field Properties section allows you to create expressions controlling actions within the Subscription Page, based on specific conditions. For details about creating Field Conditions, see our Preference Center Logic and Expressions for Logic in Form and Preference Center Designer articles.
Data Field Properties
The Data Field Properties section allows you to 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 Field Properties
The Validation Field Properties section allows you to 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 Subscription Page by adding a Consent field at the end of the page.
You can add multiple consent checkboxes by opening the Consent field's Choice Options properties clicking the + Button. You can customize the consent text using the rich text editor. If a Consent field is included in your Subscription Page, a response to all of the consent checkboxes is required for the preferences to be submitted.
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.
For additional details about adding conditional logic to your Subscription Page, see our Form Logic and Expressions for Logic in Form and Preference Center Designers articles.
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 located within the Actions Tab in the Subscription Page's Web Content record. For details about Actions see our Web Content Actions article.
Step 13: Publish your Page
For Subscription Pages created with the Preference Center Designer, publishing is done via the Publish button in the Subscription Page's Web Content record's ribbon menu. All pages can be embedded as Widget/iFrame or accessed via URL/Custom URL. Publishing makes the Subscription Page live and able to receive submissions.
Embed As Widget
A widget allows the Subscription Page to be placed within a page on your website. Place the code snippet in your web page within the <body> tags.
Embed As Link
This option will take you straight to the Subscription Page on its own page. Use this link in an email or on your website.
Embed As iFrame
This option allows the Subscription Page to be placed within a page on your website. The iframe code snippet should be placed in your web page 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 Subscription Pages created using the Preference Center Designer and published are set to Active by Default which means it will continue to be able to receive submissions unless explicitly made inactive.
You have the option to set the Subscription Page to Inactive in the Publish window.
When an inactive Subscription Page is accessed, a warning is message presented to the end user.
| Feature Added: Version 2025.03 |
Feature Updated: Version 2025.09