Guide
Guide

Add a branded map to Framer

Framer can embed arbitrary HTML, which is all you need to drop in a branded Tint map that matches your design instead of the generic grey default.

Steps

1
Design and publish in Tint
In the Tint Studio, choose a theme or brand color, add markers, and publish to get your map ID and snippet.
2
Insert an Embed in Framer
On the canvas, insert an "Embed" component (Insert → Embed) and choose the HTML option.
3
Paste the snippet and publish
Paste the Tint embed code, size the frame, and publish your Framer site.
<!-- Paste where the map should appear -->
<div data-tint="MAP_ID" style="height:420px"></div>
<script src="https://embed.tintmap.dev/v1/embed.js" async></script>

Notes

  • Give the embed frame a fixed height that matches the height in the snippet.
  • Allow-list your Framer domain in the Tint dashboard so the map renders.

Make your map look like your brand.

Free plan, no card required. Your first branded map takes about three minutes.

More guides