We’ve migrated our documentation to a new site, which means some URLs have changed.
Audience
Audience
Breadcrumbs

Showing Piano Content widgets in Sandbox

1. Introduction

Currently, Piano Content can only be enabled on production environments. If you need to test how Piano Content widgets render on a Sandbox site before going live, you can display widgets by triggering them with a RunJS action.

2. Prerequisites

Before running the widget, make sure the required scripts are available on the staging/sandbox page:

  • cx.cce.js must be implemented on the publisher's staging site for this to work.

  • In some implementations, you may also need cx.js present on the page.

Example script includes:

HTML
<script type="text/javascript" src="https://cdn.cxense.com/cx.cce.js"></script>
<script type="text/javascript" src="https://cdn.cxense.com/cx.js"></script>

If your site already loads these libraries through a tag manager or your base template, you do not need to add them again.

3. RunJS Code to Display a Widget

Use a RunJS card (in Composer) and execute the following JavaScript:

var cX = window.cX = window.cX || {};
cX.callQueue = cX.callQueue || [];
cX.CCE = cX.CCE || {};
cX.CCE.callQueue = cX.CCE.callQueue || [];
cX.CCE.run({ widgetId: <widgetId>, targetElementId: <target element ID> });

Replace the following values:

  • <widgetId> — the Piano Content widget ID you want to render.

  • <target element ID> — the ID of the DOM element where the widget should be injected.

4. Notes and Troubleshooting

  • This is a display-only workaround for sandbox testing. Since Piano Content activation and enhanced segmentation are production-only, sandbox testing is primarily useful to validate implementation, placement, and layout/UX.

  • Nothing appears on the page: Confirm cx.cce.js is loading successfully on the staging page and that the targetElementId exists in the DOM at the time the RunJS executes.

  • Target element issues: Ensure the target element uses an id attribute that exactly matches what you pass as targetElementId (IDs are case-sensitive).

Last updated: