Pages

You can preview and test your workspace content on the site at any time by activating workspace preview mode. You activate and deactivate preview mode through a dedicated page. You can also share the page URL, so that others can preview the same features. The URL is public, so you do not need any special access rights to open the page in your browser. Preview mode has no impact on what regular visitors (ones not in preview mode) see on the site.

When you preview a workspace modification, all events tracked for the modification, such as clicks, displays, and true displays, are associated with the workspace modification and not the original production modification.

Activating workspace preview mode

To preview workspace content:

  1. Enter the workspace.
  2. Make sure that each modification you want to preview is active. In the modifications list, inactive modifications are grayed out.

    To activate an inactive modification:

    1. In the modifications list, click the name of the modification you want to activate.
    2. At the top of the page, click Activate.
    3. To return to the workspace, click the workspace ID.

      Returning from modification settings to the workspace

  3. In the Actions menu, select Preview workspace.

    Previewing workspace content

    The workspace preview mode page opens. Preview mode is now active.

  4. On the preview mode page, click the site link.

    Preview mode page with site link

    If preview mode fails to activate, see Alternative solutions for activating workspace preview mode.

  5. Preview the workspace content.

    You will see a circular indicator with the workspace ID. This tells you that you're viewing the site in preview mode. If you do not see the indicator, you're viewing the live production version of the site. If the indicator has a dashed border, the workspace is using its own custom code. If the border is solid, the workspace is using the production custom code.

    Site in preview mode

    On desktop computers, you can drag the indicator to reposition it in on the page. To close the indicator, double-click or tap it. To show the indicator again, reload the page or open a new page.

    Preview mode persists across the same domain, so you can open multiple tabs for your site, and preview mode will be active in all of them.

  6. If you want to deactivate preview mode, open the preview mode page, and click Deactivate. The site now displays only the production content. To reactivate preview mode and show the workspace content, click Activate. If preview mode fails to activate, see Alternative solutions for activating workspace preview mode.

Alternative solutions for activating workspace preview mode

The preview mode page cannot activate preview mode on a site in the following situations:

  • The site does not allow itself to be loaded in an iframe.
  • The site does not have the specified workspace in the Frosmo Control Panel.
  • The site is currently unavailable.

If preview mode fails to activate, try the following solutions:

  1. Use direct site links from the preview mode page.
  2. Use the browser console to activate and deactivate preview mode.
  3. Use a bookmarklet to activate and deactivate preview mode.

If preview mode fails to automatically activate, the preview mode page provides direct site links as a workaround for activating and deactivating preview mode. Use these links instead of the normal site link.

Preview mode page with alternative site links

The direct site links can also fail to activate preview mode in some situations, namely on single-page application (SPA) sites. If the direct site links do not work, activate and deactivate preview mode manually from the browser console or by using a bookmarklet.

Using the browser console

To activate and deactivate preview mode manually from the browser console:

  1. Go to the site.
  2. Open the browser console.
  3. Call one of the following functions depending on whether you want to activate or deactivate preview mode:

    • frosmo.easy.workspaces.activate(workspaceId)
    • frosmo.easy.workspaces.deactivate()

    You can find your workspace ID (an integer number) from, for example, the preview mode page or the workspaces page in the Control Panel.

    Workspace ID on the preview mode page

    Workspace ID on the workspaces page in the Frosmo Control Panel

  4. Reload the current page.

Using a bookmarklet

Create a bookmarklet with the following JavaScript code (double-click to select) for activating and deactivating preview mode:

javascript:void%20function(){var%20e=prompt(%22Enter%20a%20workspace%20ID%20to%20activate%20preview%20mode,%20or%20leave%20the%20field%20empty%20to%20deactivate%20preview%20mode:%22);try{frosmo.easy.workspaces.activate(e),window.alert(%22Activated%20preview%20mode%20for%20workspace%20%23%22+e+%22.%20Reload%20the%20page%20for%20the%20change%20to%20take%20effect.%22)}catch(t){frosmo.easy.workspaces.deactivate(),window.alert(%22%22===e%3F%22Deactivated%20preview%20mode.%20Reload%20the%20page%20for%20the%20change%20to%20take%20effect.%22:t.message)}}();

For reference, here's the same code in non-minified and non-URL-encoded form:

var workspaceId = prompt('Enter a workspace ID to activate preview mode, or leave the field empty to deactivate preview mode:');
try {
    frosmo.easy.workspaces.activate(workspaceId);
    window.alert('Activated preview mode for workspace #' + workspaceId + '. Reload the page for the change to take effect.');
} catch(ex) {
    frosmo.easy.workspaces.deactivate();
    if (workspaceId === '') {
        window.alert('Deactivated preview mode. Reload the page for the change to take effect.');
    } else {
        window.alert(ex.message);
    }
}

You can use, for example, the Bookmarklet Maker to generate bookmarklet-optimized code from regular JavaScript.

  • No labels