A Content dialogue allows you to manipulate existing content (images, text) on a web page and replace it by other content.
This example shows a BlueConic Content dialogue:
Configuring a Content dialogue
Content property settings
Content styling settings
To use content styling settings, open the Properties widget in the right-hand side of the page and use the Styling settings pulldown menu.
These are the styling options:
Contents: Click Load examples to see prebuilt content templates you can use. You can easily edit the display text to customize the templates to create forms, collect email addresses, manage privacy, offer customer codes/coupons, manage subscriptions, launch a survey, or deliver a text message. You can also add a new example of your own in the Load examples window.
CSS URL: Enter the URL of an external CSS library.
CSS styling: Enter custom CSS to add styling to your content dialogue.
This URL will be loaded for this specific dialogue and will only be added on the frontend page and the BlueConic simulator.
The advanced settings option is relevant when you want to register conversions for this content dialogue. To register a conversion, BlueConic needs to register a click event first:
Click event selector: Select an element in the page to register a click for this dialogue if the visitor or customer clicks the selected element. Use the Visual picker to choose a position on the page. A visual picker page opens where you can select the position. Learn more about selecting a content position to register a click event using the Visual picker.
Note that there are several instances where you do not need to specify a click event selector. See the What tab documentation for Dialogues for details.
Keeping up with content changes
When you select a position on the page to be used for the content dialogue, the original content of that position will be the starting value of your content dialogue. The original content is copied to BlueConic and now part of this content dialogue. This means that future changes in the original page will not be reflected in this content dialogue but will be replaced by the content that you have edited and saved for this dialogue.
Using prebuilt content examples and customizing dialogues
To make it easier to build content dialogues, you can use the prebuilt content examples in the Properties widget on the right-hand side of the page, under Styling settings > Contents > Load examples. Clicking Load examples opens a pop-up window of samples you can use to get started.
To customize the example dialogues, you can add your own examples by selecting Add new example in the pop-up window.
For example, to create a content area where you can collect customers' email addresses, choose "Collect email address" from the Load examples window. A warning message informs you that the new content will replace any existing content in the selected position. If you select OK, the new content fills the selected position, and you can customize the content that is displayed in the dialogue.
Note that the form is part of the content and can be edited as well. Click the field to modify the form -- a UI appears that helps you edit the elements of your dialogue. For the "Collect email address" form example, see the Forms toolbar documentation to learn how you would modify the button element or style of dialogue box elements of a BlueConic example dialogue, for example if you wanted to edit the Send button text or color in the "Collect email address" form.