Publishing

Find out more about publishing your visualization, including selecting the right embed code format.

Publishing

In order to display a visualization on your website, you first need to publish it. With the visualization open, select Unpublished Draft in the toolbar, then click Publish. A window will appear, confirming that the publishing process is complete, and allowing you to select one of two options:

  • View Published Page: select this option to open the published page in a new window.
  • Copy Embed Code: copy to your clipboard the embed code, which you can paste into a code block in your website CMS. If you select the Link Only embedding method (see below), a link rather than code will be copied to the clipboard, which you can paste into any compatible link block in your website CMS.

Once the visualization is published, you can access these embedding options at any time from the menu that appears when you click the Published button in the toolbar. The menu also includes the following options:

  • Republish: this replaces the previous version of the visualization with the latest version. The existing embed code is retained when republishing, ensuring that any visualizations already embedded on your website will automatically update to display the latest version.
  • Open Embedding Options: this lets you view and select any embedding method (see below).
  • Unpublish: this removes the visualization from public view, making it inaccessible to anyone who previously had the embed code or published page link. Unpublishing does not delete the visualization, so you can continue working on it in draft mode and republish it later when it's ready for public display again.

Embed Methods

When you add a Mappica visualization to your website, two code blocks need to be added: an iframe containing the visualization and a script that dynamically adjusts the iframe's height as the viewport is resized. We offer several different embed methods to ensure that both code blocks can be successfully embedded onto your website. You can choose a Default Embed Method in your workspace's Settings page; this method will be selected by default in every visualization you create in your workspace.

The following embed methods are available:

  • Head+Body Code: if you choose this option, you should ask your website administrator to add the header code below to the head section of your website (or every page template where you may embed a visualization). With this in place, you can embed individual visualizations by pasting into your CMS an embed code containing the visualization iframe.

HEADER CODE

<script>
window.addEventListener("message", (function(e) {
 if (e.data && "number" == typeof e.data["viz-height"]) {
 var t = document.querySelectorAll('iframe[data-mappica-height="dynamic"]');
 Array.from(t).forEach((function(t) {
 t.contentWindow === e.source && (t.style.height = e.data["viz-height"] + "px")
 }))
 }
}));
</script>

  • Body Code: if you choose this option, each visualization's embed code will include both the iframe and the necessary script. This means you can paste the embed code anywhere in your website where code blocks are supported, without needing to add any additional header code. Since the same script will be included with every visualization, this method is most suitable for websites where only a small number of visualizations will be embedded.

  • Link Only: if you choose this option, only a link to the published page will be copied to the clipboard (rather than embed code). This is useful if your CMS does not support iframe embedding, or if you prefer to display visualizations on a separate page rather than embedded within your website content.

Private Sharing

By default, published visualizations are viewable by anyone who has the link. If you wish to add password protection or share visualizations with specific members of your team, you can configure these options under Private Sharing when publishing.

If you are password-protecting a published visualization, the published page will have the following attributes:

<meta name="robots" content="noindex,indexifembedded,nofollow" />

This means:

  • The page will not be indexed by search engines if accessed directly.
  • If the page is embedded inside another web page (e.g., in an <iframe>), and the container page is indexed, then the published page may be indexed in that embedded context—depending on the search engine (Google honors indexifembedded; others may not).
  • Search engines will not follow links on the published page, so no PageRank is passed through it.

Embedding with WordPress

If your website uses WordPress, we recommend using the Head+Body Code method. Follow these steps to install the necessary scripts and embed your visualization.

Step 1: Install the Header Code

Begin by installing the code for the head section of your website.

  1. In your Mappica workspace, open the Settings page, select Head+Body Code under Default Embed Method, and then Copy Header Code (which copies the code to your clipboard).
  2. In WordPress, open the Plugins section and search for a plugin that allows you to add a header script, such as "WPCode – Insert Headers and Footers."
  3. Install and activate the plugin.
  4. Open the plugin using the Code Snippets option in the WordPress menu.
  5. Select Header and Footer, then paste the copied code into the Header section.
  6. Click Save Changes.

This installs the header code for your website. You only need to do this once; for future visualizations, you can go directly to Step 2.

Step 2: Embed the Visualization

The final step is to embed the visualization using an iframe.

  1. In Mappica, open the visualization, select Publish, and once publishing is complete, Copy Embed Code.
  2. In WordPress, navigate to the page or post where you want to embed the visualization.
  3. Click + (Add Block) and select Custom HTML.
  4. Paste the copied embed code into the Custom HTML block.
  5. Click Preview to confirm that the visualization displays correctly.
  6. Publish the page or post.

The header code added in Step 1 ensures that the visualization height adjusts as needed.

Embedding with Webflow

If your website uses Webflow, we recommend using the Head+Body Code method. Follow these steps to install the necessary scripts and embed your visualization.

Step 1: Install the Header Code

Begin by installing the code for the <head> section of your website. In your Mappica workspace, open the Settings page, select Head+Body Code under Default Embed Method, and then Copy Header Code (which copies the code to your clipboard).

Next, in Webflow:

  1. Open Site Settings in your Webflow dashboard by clicking on the menu icon (three dots) adjacent to your site name and selecting Settings.
  2. Select the Custom Code tab.
  3. Paste the copied code into the Head Code section.
  4. Click Save and then Publish your site.

This ensures that the necessary scripts are loaded for all pages. You only need to do this step once; once installed, you can proceed directly to step 2 when embedding future visualizations.

Step 2: Embed the Visualization

The final step is to embed the visualization using a Webflow Code Embed element.

  1. In Mappica, open the visualization, select Publish, and once publishing is complete, Copy Embed Code.
  2. In Webflow's Designer, navigate to the page where you want to add the visualization.
  3. Click the + (Add Element) button and search for Code Embed.
  4. Drag the Code Embed element to the desired location on the page and open it by double clicking on it.
  5. Paste the copied embed code, click Save & Close, and then Publish your site.

Your visualization should now be displayed on your Webflow site. The header code, added in Step 1, ensures the visualization adjusts its height as needed.

Publishing Settings

Visibility Options

Control how your published visualizations appear:

  • Title and Description: Set metadata that appears in shared links
  • Thumbnail Image: Choose the preview image for social sharing
  • Branding: Include or hide Mappica branding (Pro feature)
  • Custom Domain: Use your own domain for published links (Pro feature)

Interactive Features

Configure what users can do with published visualizations:

  • Full Interactivity: Enable all filters, selectors, and navigation
  • Limited Interaction: Restrict certain interactive elements
  • Static View: Disable all interactivity for presentation purposes
  • Download Options: Allow users to download data or images

Performance Optimization

Ensure published visualizations load quickly:

  • Caching: Optimize loading times through intelligent caching
  • Compression: Reduce file sizes without sacrificing quality
  • CDN Distribution: Serve content from global content delivery networks
  • Mobile Optimization: Ensure fast loading on mobile devices

Export Options

Image Exports

Download visualizations as high-quality images:

  • PNG Images: High-quality images suitable for presentations and documents
  • JPEG Images: Compressed images for web use and sharing
  • SVG Files: Scalable vector graphics (Pro plan only)

Data Exports

Export the underlying data from your visualizations:

  • CSV Files: Standard spreadsheet format with support for external URLs and filtered data
  • Dataset Downloads: Direct downloads from the workspace with up to 10MB support

Embedded Downloads

Enable end-user downloads from published visualizations:

  • Image Download Links: Create downloadable links in text blocks for images
  • Dataset Download Links: Create downloadable links in text blocks for datasets
  • Workspace Downloads: Download images and datasets directly from the editor