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
You compose the content for a Content dialogue using the (inline) text editor. For information on using the BlueConic inline text editor see Text editor. You can use the Properties settings in the right-hand portion of the page to set styling, find content templates (for collecting email addresses, adding custom forms, revealing coupons or codes, managing privacy or GDPR, CCPA/CPRA, or other legislation zone consent, starting a questionnaire or survey, launching subscription flows, or delivering text or links), add JavaScript or CSS styling, select a click event, etc.
Content property settings
In the Properties widget on the right-hand side of the page you can further customize the content display by choosing Styling settings, JavaScript settings, or Advanced settings from the pulldown menu.
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.
JavaScript settings
JavaScript library URL: Add a URL to be able to use an external JavaScript library. For example, you can use this when you want to load jQuery.
This URL will be loaded for this specific dialogue and will only be added on the frontend page and the BlueConic simulator.
Custom JavaScript: Enter custom JavaScript code to execute a custom function or to call for the JavaScript library. If jQuery is not available on your website, you can use bc.$ or bc.jQuery instead.
Advanced settings
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.
Testing and troubleshooting dialogues
For tips on testing your dialogues with the BlueConic Simulator, see the video and tips in Testing Your Dialogues. Also see the troubleshooting dialogues section.