Website Builder Guides

Adding the Lewotobi map to your website builder is straightforward. It usually involves adding an "HTML" or "Custom Code" block to your page and pasting in two pieces of code: the container and the script.

Your Embed Code

You will need your Shop ID to display your specific map. You can find this in your Lewotobi Settings. Replace YOUR_SHOP_ID with that value.

Good to Know: Mobile Layout

To optimize the touchscreen experience, the map will automatically force a square aspect ratio on mobile devices regardless of the height you set in the style attribute. Ensure your page layout can accommodate this dynamic height change on smaller screens.

Smart Theming

The map colors will automatically sync with your Style Settings in the Lewotobi dashboard. You do not need to configure colors in the embed code itself.

Container Styling Tips

  • Use border-radius in the style attribute (e.g., 12px) to match your site's rounded corners.
  • Always include overflow: hidden when using rounded corners so the map doesn't spill over the edges.
  • We recommend a minimum height of 600px for desktop screens.
HTML Snippet
<!-- 1. The Container --> <div class="lewotobi-embed-map" data-id="YOUR_SHOP_ID" style="width: 100%; height: 600px; border-radius: 12px; overflow: hidden;" ></div> <!-- 2. The Script --> <script src="https://app.lewotobi.com/mapwidget.js" async></script>

Platform Instructions

WordPress (Gutenberg)

  1. Open the page or post where you want the map.
  2. Click the + icon to add a new block.
  3. Search for and select the Custom HTML block.
  4. Paste the entire HTML Snippet (both container and script) into the block.
  5. Click Preview on the block to see the map load.

Squarespace

  1. Edit the page and click Add Block.
  2. Select the Code block from the menu.
  3. Ensure the format dropdown is set to HTML.
  4. Uncheck "Display Source".
  5. Paste the HTML Snippet into the code box.
  6. Save the page.

Wix

  1. Click Add Elements (the + icon) on the left sidebar.
  2. Go to Embed Code > Embed HTML.
  3. Click Enter Code above the newly placed element.
  4. Paste the HTML Snippet and click Update.
  5. Resize the Wix element to be at least 600px high so the map fits properly.

Webflow

  1. Open the Add Elements panel.
  2. Scroll down to the Components section and drag an Embed element onto your canvas.
  3. In the HTML Embed Code Editor, paste the HTML Snippet.
  4. Save and Close.

Shopify

  1. From your Shopify admin panel, go to Online Store > Themes.
  2. Find the theme you want to edit and click Customize.
  3. Click Add section on the left sidebar.
  4. Select the Custom Liquid or Custom HTML block.
  5. Paste the HTML Snippet into the code box and click Save.