Skip to main content

FAQ: Dialogues

Updated today

Why can't I edit my position inline?

The inline editor in BlueConic does not work for every position, and it is possible that the Visual Picker came up with a position selector that cannot be edited by the editor.

For example, in the screenshot below, a position was picked:

The position path for the Visual Picker is in this case:

body > div > div > div > div > div > div > div > div > div > div > a > img

This path ends with an "img" tag. This "img" tag cannot be edited with the inline editor, so even though this selection results in a perfectly legal selector, the path is not suitable for an inline editing position.

This can be resolved by picking another tag from the position path shown above the page. When you hover over the path, a popup window with more information appears, and a red outline shows what the selection would encompass on the page.

In our example, the tag before "img" is an "a" tag. This tag also cannot be edited in the inline editor, so we choose the tag before that, the "div".

How do I use the Visual Picker with HTML images in BlueConic?

The path is now:

body > div > div > div > div > div > div > div > div > div > div

Click "Test" to see if this selection covers the correct area, and if it does, click "Use this position."

Now the position can be edited inline.

Tags that work with the inline editor:

  • address

  • article

  • aside

  • blockquote

  • body

  • details

  • div

  • fieldset

  • figcaption

  • footer

  • form

  • h1

  • h2

  • h3

  • h4

  • h5

  • h6

  • header

  • hgroup

  • nav

  • p

  • pre

  • section

Why does the design of the position break after I click 'Pick and Edit'?

The inline HTML editor in BlueConic can be picky about the content it is editing. If the content contains invalid HTML (e.g., nested header tags or empty i tags), the editor will correct the bits it considers to be wrong. This correction can result in a different design of the position.

If you notice this happening:

  1. Reload the Dialogue by navigating to it again. Do not save the changes when asked to.

  2. To the right of the Pick and Edit button is a selection arrow. Click it, and you can choose the option Open in HTML editor.

How do I use the HTML editor in the best-in-class BlueConic customer data platform (CDP)?

Now you should be able to edit the HTML source without disrupting its structure. This will leave the design intact.

How do I edit HTML source code in the BlueConic customer data platform (CDP)?

Save your Dialogue when ready.

Why can't I edit and change my background image?

In order to be able to edit an image, it has to be part of the HTML source of the position you are editing. For example, with the help of CSS, images can be shown where the actual HTML source does not contain an image.

You can edit the HTML source of the position to see if anything is going on using the HTML editor.

For example, if the HTML looks like this and you can only edit the text, then the class "background-image" makes the image appear behind the text:

<div> <div class="background-image"> <img src="/images/background.jpg" /> </div> <div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div>

In the above example, if you want to change the actual image, change the "src" attribute of the "img" tag to the URL of another image. Just make sure the URL of the image is publicly accessible, in other words, the image has to be uploaded to a public website.

Sometimes the HTML source does not even have an "img" tag at all:

<div class="background-image">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

In this case, the image is delivered via the CSS class "background-image", and the URL for the image is part of the style sheet itself. BlueConic cannot edit the style sheet itself, so in this case there is no way to edit the image.

To summarize:

  • If you cannot edit an image with the inline editor, try the HTML editor.

  • In the HTML editor you cannot upload an image, so you will have to use the URL of an existing image.

  • If the HTML editor does not contain an image URL to edit, the image is likely served via CSS and cannot be edited.

How can I use the Shortened URL feature and track conversions?

Note that if you create a link using the “shortened URL” option that does not track conversions, you should check the link HTML to ensure that the following classes exist:

  • data-bc-shortenedurl

  • data-bc-shortenedurl-id

  • data-bc-shortenedurl-target

If these classes are missing, BlueConic will not be able to appropriately track clicks and conversions.

To enable BlueConic to track clicks and conversions for a shortened URL,you can temporarily unlink the target location and recreate the URL redirect using the link in the toolbar. Do not click “Save” yet.

You can then copy and paste the classes listed above, refresh the page, and add them to your original HTML. This will enable BlueConic to begin tracking clicks and conversions for your URL.

How can listen to form input? Nothing seems to be happening.

First, make sure that the form is actually part of the page and not hosted in an iframe. If the form is hosted in an iframe, then the only way to enrich the profile based on the visitor's input is to have the BlueConic script placed in the iframe as well.

Another important aspect to consider is how the form is handled by the site. Traditionally, forms are submitted using the HTML DOM form submit, which for example is triggered by clicking a 'submit button'. A lot of websites choose to prevent the default submit event and handle the form programmatically -- for example, by triggering an AJAX request to send the input data to the server and not have the page reloaded completely. The rules of the Form Listener need to be configured to fit the way the form is handled by the site.

Finally, there is the way the form is initially loaded into the page. Traditionally, the form is just part of the HTML body of the page. Some sites, however, especially sites that embrace the Single Page Interface model, choose to load the form dynamically, after the HTML body has loaded.

If you are not sure how the site is handling or loading the form, try the different rule variations to find the variation the works for you.

The different listen rule variations are:

  • Write data to a profile property when the surrounding form is submitted
    This corresponds to the traditional way of submitting and loading forms.

  • Write data to a profile property when a custom form is submitted
    This also corresponds to the traditional way of submitting forms but lets you manually choose the form. Whenever the form is dynamically inserted into the page this should be the first variation to try.

  • Write data to a profile property when a custom defined form is submitted
    This variation should be used when the fields are not located inside the form that is programmatically submitted by the site. Either manually choose the position on the website or use the visual picker to select the form.

  • Write data to a profile property when a custom position is clicked
    This variation should be used when the form submit is handled programmatically by the site. You manually choose the position on the website, which after it is clicked should trigger a profile update.

  • Write data to a profile property when the location hash changes
    This variation should be used when the form submit is handled programmatically by the site and the URL in the browser is appended with a specific hash (e.g. "#success") as a result. Enter the hash name without the "#" so BlueConic can determine a successful submit has taken place.

how do collect customer data from input forms in BlueConic?


Why is there a blue underline on my dialogue elements and how do I remove it?

If text elements like a date, divider, or section in your dialogue are appearing with a blue underline, even after applying text-decoration: none;—this is likely due to an inherited border-bottom style in the CSS. If overriding this in your custom stylesheet doesn't work, try adding style="border-bottom: none;" directly to the HTML tag using the HTML editor. This inline approach can effectively override inherited styles and ensure the elements appear cleanly on a single line.

Why is the “Select” dropdown in the Dialogue editor empty?

  • If the “Select” dropdown under the What tab of a Dialogue is empty or not showing any positions, this usually means BlueConic is unable to load your website correctly inside the preview iframe.

    To resolve this:

    • Install the BlueConic Chrome Extension from the Chrome Web Store and ensure it is active in your browser.

    • Open your website (the target site for the Dialogue) in a second browser tab, and refresh both tabs, the site tab and the BlueConic Dialogue editor tab.

    • Disable any ad blockers or browser extensions that may interfere with loading the website inside the iframe.

    • Verify the BlueConic extension shows a profile ID and indicates that BlueConic is active on the page, this confirms that the script has loaded correctly.

Once these steps are complete, return to the Dialogue editor and reload the What tab. The "Select" dropdown should now populate with available positions from your website.

How can I make sure a dialogue only shows once on a page in BlueConic?

If a dialogue appears multiple times on a page, it could be due to the page structure specifically, if the CSS selector used for the dialogue’s position matches multiple elements. In this case, the dialogue may render more than once. To address this, you can update the position targeting in Settings > Channels & BlueConic hostnames to more narrowly define where the dialogue should appear. Consider using more specific selectors, or a unique ID to ensure it only matches one element. In addition to position settings, you can also use the "When" tab in the dialogue configuration to control how often a dialogue displays. For example, use the "Hide after conversion" setting or apply other visibility rules to prevent the dialogue from showing repeatedly for the same visitor. If your dialogue isn’t appearing during testing, double-check the "Who" targeting rules and ensure your test profile meets the required conditions.

Why doesn’t my custom blur effect appear when editing a Dialogue?

If you’re adding a blur effect or other visual effect using JavaScript, be aware that custom JavaScript does not execute in the editor preview (What-tab) of a BlueConic dialogue. These effects will only appear in the simulator or on the live site where the full page context and script execution are available. To test the effect, use the simulator.

Can I bulk export dialogue HTML, CSS, or JavaScript from BlueConic?

BlueConic does not support exporting the raw creative content (HTML, CSS, JavaScript) of dialogues in bulk. However, you can export dialogue performance metrics using the Dialogues Table Insight or Variants Table Insight.

Did this answer your question?