Skip to main content

Drag and Drop Publishing

Brendan Cooper
  • Updated

NOTE: This method of publishing is no longer being actively supported by our product team and will not receive any updates in the future. We suggest consulting the following article for more information on the latest publishing methods that we offer. Please contact with any questions about what publishing method might work best for your website.

Drag and Drop Publishing is one of the options to push Creator Studio content to your website. As the name suggests, you can drag an existing Experience or group from Creator Studio into an HTML container on your webpage. It is accessible from both the Main Dashboard and the Project Dashboard.

To be ready for publishing, you need to insert the Creator Studio JavaScript snippet into the code of your website, preferably the <head> tag, as it will be loaded faster.

Also, make sure you have a DIV container in the body of the page you're publishing to that is the right size for the experience you want to publish. We suggest using our DIV Generator tool to create that code.

 

Publishing Modes

Drag and Drop Publishing supports two modes:

  • Channel Preview mode, used if the web page you have provided does not contain a channel snippet. This mode will not publish anything on your website since the channel snippet is missing, but it will allow you to preview what the end-result will look like, and save the configuration found by Drag and Drop for later use.
  • Production mode, used once you have the snippet set up, lets you publish an Experience or group to your site within few minutes.

These approaches support only individual URLs. If you wish to publish an Experience to multiple URLs, you should use our powerful Manual Publishing feature instead. To access Drag 'n Drop windows, type the prepared website's URL into the provided box, and click 'Go'.

 

Channel Preview Mode

If you haven't yet set up the channel snippet on the page you wish to publish your Experience, this is the approach to follow. Once you click "Go" under "Enter website URL", Creator Studio will open two windows:

  1. The Experience window on the right side will explain the necessary steps to preview the Experience.
  2. The client website window on the left will load the page you have provided.

Important: If you are seeing only the Experience window, your browser may be blocking popups. You need to allow an exception in your popup blocker.

In order for the preview to start, the green "Experience Preview" button on the right side has to be dropped in the browser's bookmark bar on the left side. Here's how to open the bookmark section in Chrome:

1. Right-click the title bar of the website window and select ‘Show as tab’ in the drop-down menu.
2. Click the menu button in the upper-right corner, click 'Bookmarks', and ensure "Show bookmarks bar" is checked.
3. Bring the Experience window to the front by clicking its button in the task bar at the bottom of your screen.
4. Click and drag the black "Experience Preview" button from the Experience window to the bookmark bar of the website window (below the address field).

Once done these steps, you are able to see the Bookmark section and drag the Experience Preview in it.

The result of dragging and dropping the Experience Preview button can be seen below:

When the newly added bookmark button is clicked, the Experiences and groups are loaded in the right window. You can then drag and drop them into the left-most window as shown in the figure below, which is the same as you will see in Production mode, with the exception of having a Save button instead of a Publish button.

The Drag and Drop algorithm will try to find the best HTML containers candidates to inject the Experience. Specifically, it will look for HTML tags such as "address", "article", "aside", "div", "figure", "footer", "header", "li", "main", "nav", "section" and "td". Visually, the draggable container is highlighted with a light blue color when you are dragging (and not dropping!) the Experience in the window (see below).

When dropping the selected Experience or group from the right into the left window, you will be able to see the Experience on the web site. Once you are happy with the look and feel of the Experience inside the page, you may want to save this configuration for future publishing. Simply click the 'Save' button on the bottom of the experience window. This configuration (in this case named Creatordemo1, but you can change that later) will then be listed under the Manual Publishing section, and it will contain the information used to link the Creator Studio Experience with the HTML element in your web site (more details here). 

Please note that the Preview approach described above will not publish any real content on your website, since there is no Channel snippet on the page.

 

Production Mode

This mode is enabled when you have placed a channel snippet inside the page you are publishing on. It will behave exactly the same as the above Preview mode, with two important exceptions:

  1. You will be able to drag and drop Experiences and groups as soon as the two windows are loaded, without needing to follow the preview steps.
  2. A 'Publish' button will be shown instead of 'Save'. The slot configuration will be still saved under the Manual Publishing section, but once the Publish button is clicked, the Experience will be pushed to your website within few minutes.

For more details about high-level steps to be followed during publishing, we suggest the Publishing Experiences article.

 

Related articles

Comments

0 comments

Please sign in to leave a comment.