Using the content editor

Content editor

In various interaction types of BlueConic you can use an editor to edit content. The editor is available in two modes:

  1. The in-line editor
    This mode allows you to directly edit text and graphics within the context of a webpage. This means you can directly view the effect of other elements on the page, such as external stylesheets. It is available in the content and lightbox interaction types.editor.png
  2. The rich text editor
    This mode allows you to edit text and graphics in a separate window. It is available as fallback option, when in-line editing is not possible. It is also used for the email interaction type.wysiwyg.png

If required it is also possible to switch to HTML-mode to directly view or modify the source code.

In this section

Formatting the text
Inserting, editing, and replacing images
Inserting and editing hyperlinks
Insert profile property values
Switching edit modes
Viewing or modifying the HTML source code

Formatting the text

You can format the text in rich text editor using standard formatting such as bold, italic, bulleted lists, and so forth. Most of the formatting options in the toolbar are straightforward. If you want to know what a specific button does, hover the mouse over it and a tooltip will appear. For example:


You can apply formatting to all text, hyperlinks, and profile properties appearing in the content.


Inserting, editing, and replacing images

By clicking on the "insert image" button in the toolbar you will open a window where you can select an image or drag and drop it.

After uploading an image you can edit the image.


General settings

These are the general settings you can make in this window:

Name Name of the selected image file. To change the image, select replace
Title Title of the image. This is the text that will appear in a tooltip if you hover over the image.
Alt Text The Alt Text is used as an alternative for the image in text-oriented browsers.
Link If you add a link, the image becomes clickable and readers are forwarded to the entered URL. Here you can also configure profile properties that need to be set when people click this image.


Width and height

You can select the part of the image that needs to be displayed by changing the crop area in the image preview. The ratio of that crop area will be influenced by the selection you make in the width and height settings:

Width of the position The image will be scaled to fit the width of the position. The crop area can be chosen without limitations.
Dimensions of the position The image will be scaled to fit the dimensions of the position. The ratio of the crop area is fixed and you can only resize this area proportionally.
Dimensions of the previous image This option is only available if the image window is opened to edit an existing image. The image will be scaled to fit the dimensions of the original image. The ratio of the crop area is fixed and you can only resize this area proportionally.
Custom Here you can specify the exact size to which the image need to be scaled. The following situations can occur:
  • Both width and height are specified: The crop area has a fixed ratio and can only be resized proportionally.
  • Only width or height are specified: You can freely select a crop area. The image will be scaled to specified height or width.
  • No width and no height is specified: You can freely select a crop area. The image will not be scaled but displayed in the original resolution of the crop area.


You can also enter the edit image window by selecting an image in your content and then click the "edit" option below the image, or by double clicking it:

Inserting and editing hyperlinks

You can insert hyperlinks to the content that leads to the specified URL when a visitor clicks the link. You also have the option to edit existing hyperlinks in the content. You can do this by clicking on the "insert hyperlink" button in the toolbar after highlighting the text that you want to link, or clicking on "edit" when you have selected an existing hyperlink.


This will open up the edit hyperlink window:


The following settings can be configured:

Link Text The actual text that is shown on the screen and that can be clicked.
Target URL The URL that the visitor should be directed to after clicking.
Profile property rules You have the option to add values to one or more profile properties when a visitor clicks this specific link. Add a rule for every profile property value that you want to add.


In the same way you can also add or edit hyperlinks to images in your content. This can be done in the insert or edit image window.


Personalizing content

Personalize a piece of content by adding profile property values inline with the text in the editor. To do so, follow the steps below.

  1. Click the Select Personalize button:


    The Select Profile Property dialog box appears:


  2. Select the profile property whose value should be displayed.

  3. Click [Apply]. The profile property is added to the item you are working with as a placeholder item. The value of the profile property will appear at the location of the placeholder.



Additional edit modes

If you are working in the inline view you can open an additional rich text editor window by selecting the "Rich Text" button. Changes in the rich text editing window are immediately reflected in the inline view.


As an alternative to the rich text window you can also switch to the html-mode by clicking on the "HTML" button.


Inserting objects

You can also insert objects into the content by using the "Insert object" menu:


Which objects are available depends on which toolbar plugins have been installed in BlueConic.


Viewing or modifying the HTML source code

When you enter text in the editor, it appears as normal text, however it is actually formatted HTML code. If you select the "HTML" button in the toolbar of the editor, an extra window opens containing the source code of content that you are editing. Here you can add text to the content and modify the HTML markup. Changes that you make in the source code will immediately be reflected in the editing window. You can move the HTML window to any location in your screen that is convenient to you.

Back to top