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 a header code (the height-controlling script) to the <head> section of every page on your website (or every page template where you may embed a visualization). With this in place, you can embed individual visualizations by pasting directly into your CMS an embed code containing the visualization iframe.
- Body Code: if you choose this option, you will need to paste a bundle containing both the iframe and height-controlling script into your website CMS every time you want to embed a visualization. Use this method only if you are able to add <script> tags directly in your website CMS.
- Link Only: choose this option if you CMS only requires you to paste a link to the published visualization page.
You can use many different website CMS platforms to embed Mappica visualizations. Common examples are listed below. Feel free to reach out to us at support@mappica.com if you experience any problems embedding visualizations on your website.
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.
- 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).
- 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."
- Install and activate the plugin.
- Open the plugin using the Code Snippets option in the WordPress menu.
- Select Header and Footer, then paste the copied code into the Header section.
- 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.
- In Mappica, open the visualization, select Publish, and once publishing is complete, Copy Embed Code.
- In WordPress, navigate to the page or post where you want to embed the visualization.
- Click + (Add Block) and select Custom HTML.
- Paste the copied embed code into the Custom HTML block.
- Click Preview to confirm that the visualization displays correctly.
- 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:
- Open Site Settings in your Webflow dashboard by clicking on the menu icon (three dots) adjacent to your site name and selecting Settings.
- Select the Custom Code tab.
- Paste the copied code into the Head Code section.
- 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.
- In Mappica, open the visualization, select Publish, and once publishing is complete, Copy Embed Code.
- In Webflow’s Designer, navigate to the page where you want to add the visualization.
- Click the + (Add Element) button and search for Code Embed.
- Drag the Code Embed element to the desired location on the page and open it by double clicking on it.
- 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.
