How to Embed an Interactive Map in Your Website Builder
Install a responsive LayerPin map without changing your website's theme. This guide covers the complete setup and the exact steps for six popular website builders.
In this guide
Before you start
Prepare the map in LayerPin before opening your website builder. This prevents an unpublished map or unsaved website permission from producing an empty embed.
- 1
Publish the map so viewers can load its latest published version.
- 2
Open the map's Embed page and enable website embedding.
- 3
Add the public website domain where the map will appear, then save. You can enter example.com or its full HTTPS address.
- 4
Open the Install tab and copy the recommended code for your website builder.
Recommended: Installation script
Embed in WordPress
Add the script in a Custom HTML block. Complete the LayerPin setup above first, then follow these builder steps.
- 1
Open the page or post where the map should appear.
- 2
Add a Custom HTML block at the map position.
- 3
Paste the installation script from LayerPin into the block.
- 4
Preview the page, then publish or update it.
Recommended: Installation script
Embed in Webflow
Paste the script into a Code Embed element. Complete the LayerPin setup above first, then follow these builder steps.
- 1
Open the page in Webflow Designer.
- 2
Add a Code Embed element where the map should appear.
- 3
Paste the installation script from LayerPin and save the embed.
- 4
Preview the page, then publish the Webflow site.
Recommended: Iframe code
Embed in Wix
Use an Embed Code element with the iframe code. Complete the LayerPin setup above first, then follow these builder steps.
- 1
In the Wix editor, open Add Elements, then Embed Code.
- 2
Add an Embed HTML element and choose Enter Code.
- 3
Paste the iframe code from LayerPin, apply it, and size the element.
- 4
Check the desktop and mobile layouts, then publish the site.
Recommended: Iframe code
Embed in Squarespace
Add the iframe code through a Code block. Complete the LayerPin setup above first, then follow these builder steps.
- 1
Edit the page and add a Code block where the map should appear.
- 2
Set the block to display HTML.
- 3
Paste the iframe code from LayerPin and apply the change.
- 4
Check the page at different widths, then save and publish.
Recommended: Installation script
Embed in Framer
Paste the script into an Embed component. Complete the LayerPin setup above first, then follow these builder steps.
- 1
Open the page in Framer and choose Insert, then Embed.
- 2
Place the Embed component where the map should appear.
- 3
Paste the installation script from LayerPin into the component.
- 4
Set its responsive size, preview the page, and publish.
Recommended: Installation script or iframe
Embed in Ghost
Add the script or iframe through an HTML card. Complete the LayerPin setup above first, then follow these builder steps.
- 1
Open the post or page in the Ghost editor.
- 2
Add an HTML card from the card menu.
- 3
Paste the installation script or iframe code from LayerPin.
- 4
Preview the published page layout, then publish or update it.
Check an embed that does not load
- Confirm the map is published and website embedding is enabled.
- Confirm the exact website domain is listed in Allowed websites and the settings are saved.
- Open the published website over HTTPS. Editor previews can use a different domain from the live site.
- Make the builder element wide enough and use the iframe option if the builder removes scripts.
- After changing the map, republish it so the embed receives the updated published version.