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

To import a Mapbox map from CodePen into Webflow, you need to embed the correct HTML, CSS, and JavaScript, and ensure your Mapbox access token is valid and properly loaded. Here's how to do it and troubleshoot token issues.

1. Extract Code from CodePen

• On CodePen, open the pen containing the Mapbox map.
• Click the Settings (gear icon) > JavaScript section and note the Mapbox script being loaded (e.g., cdn.mapbox.com).
• Note whether the Mapbox accessToken is set in the JavaScript (mapboxgl.accessToken = '...').
• Copy the HTML structure, CSS styles, and JS logic from the CodePen.

2. Add HTML to Webflow Embed

• In the Webflow Designer, drag an Embed element into your page where you want the map.
• Paste the HTML structure inside the embed (e.g., a <div id="map"></div> for the map container).
• Ensure you give the container a width and height (via style or Webflow Designer) or the map will not be visible.

3. Add Required External Scripts

• Go to Page Settings or Project Settings > Custom Code.

• Under Before , paste the Mapbox JavaScript initialization code, making sure it includes:

• Loading the Mapbox script (via <script src="...">)

• Valid accessToken

• Map initialization logic

• For example (do not copy raw into Webflow, just reference):

• mapboxgl.accessToken = 'YOUR_TOKEN';

• new mapboxgl.Map({ container: 'map', ... });

4. Fix Mapbox Access Token Issues

If your map does not display, the issue may be with the token:

• Verify the token is active: Go to account.mapbox.com and check if the token is valid or expired.
• Check domain restrictions: In your Mapbox account, review whether the access token has URL restrictions (only allows usage from approved domains). If so:
• Make sure your Published Webflow domain (e.g., mysite.webflow.io or your custom domain) is listed.
• Console error messages: In Chrome Dev Tools, look under the Console tab. A 401 error or “Unauthorized” typically means the token is invalid or restricted by domain.
• Regenerate the token: If unsure about the token, generate a new public token with no URL restrictions and paste it into your script in Webflow.

5. Publish and Test

• Save changes in Webflow and click Publish.
• Open the published site and check your browser’s Console for any loading or token errors.

Summary

To import a Mapbox map from CodePen into Webflow: copy the HTML/JS code from CodePen, embed it using Webflow’s Embed element, and ensure your Mapbox access token is valid and unrestricted. Token issues usually arise from expired keys or domain restrictions, which can be resolved in your Mapbox account settings.