How can I import a Mapbox from Codepen into Webflow and what could be causing issues with the access token?

To embed a Mapbox map from CodePen into Webflow, you'll need to copy the relevant HTML, CSS, and JS into Webflow elements and make sure your Mapbox Access Token is valid and correctly placed. If you're seeing errors, the token is often the cause.

​

1. Copy Code from CodePen

​

• Open the CodePen that contains your Mapbox map.
• Copy the HTML content into an Embed element in Webflow, or into a custom code block in the Page Settings (before </body>).
• Copy the CSS into your page’s custom code (inside a <style> tag) or into Webflow’s Page Settings > Footer Code.
• Copy the JavaScript into Webflow’s Page Settings > Footer Code or place it inside <script> tags in an Embed element.

​

2. Verify the Access Token Placement

​

• In the JS code (usually at the top), there should be something like:  

  mapboxgl.accessToken = 'your-token-here';

• Make sure this token is your personal Mapbox access token, available from the Mapbox Dashboard.
• Do not share or expose private tokens publicly unless you configured them that way (public scopes only).

​

3. Add Mapbox Script and CSS Libraries

​

• You must include the Mapbox GL JS library and its corresponding CSS.
• In your Webflow Page Settings > Before </head>, add:
• <link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
• In Page Settings > Footer Code (before </body>), add:
• <script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>

​

4. Troubleshoot Access Token Issues

​

If the map isn't displaying or shows an error:

​

• Check the browser console for messages like “Forbidden” or “Invalid access token”.
• Common causes:
• Expired or Revoked Token: Go to your Mapbox account to generate a new one.
• Token Not Pasted Correctly: Make sure quotes are intact and the key isn’t truncated.
• Restrictions Set on Token: If your token is restricted by domain or scope, ensure webflow.io or your custom domain is allowed.
• Script Order: The mapboxgl.accessToken must be set before calling new mapboxgl.Map().

​

5. Optional: Use Webflow CMS with Mapbox

​

If your CodePen map relies on dynamic data (locations, coordinates), you can connect Webflow CMS using custom attributes or fetch CMS data via JavaScript inside the embed.

​

Summary

​

To import a Mapbox map from CodePen into Webflow, embed the HTML/CSS/JS into your Webflow project and ensure your Mapbox access token is valid, unrestricted, and loaded before map initialization. Most issues stem from invalid or restricted tokens or missing script includes.