Geo-Targeting for Webflow
Add geo-targeting to any Webflow site in 60 seconds
GeoSwap works on every Webflow site — including free plans. You do not need to know how to write code. Just paste one line into your project settings and publish.
Works with all Webflow hosting plans, including free
No custom code knowledge needed
Geo redirects, content personalization, popups, and more
How to Install
Open Project Settings
In the Webflow Designer, click the gear icon or go to your project's Settings.
Go to Custom Code
Navigate to the Custom Code tab. You will see two sections: Head Code and Footer Code.
Paste the GeoSwap script in Head Code
Paste the script tag into the Head Code section. This ensures GeoSwap loads on every page of your Webflow site.
Save and publish
Click Save Changes, then publish your Webflow site. Custom code only takes effect on the published site, not in the Designer preview.
Webflow Head Codehtml
<script src="https://cdn.geoswap.co/geoswap.js" data-account="YOUR_ACCOUNT_ID" defer></script>Replace YOUR_ACCOUNT_ID with your actual Account ID from Settings → Install in your GeoSwap dashboard.
Verify Your Installation
Open your published Webflow site in a browser (not the Designer preview).
Go to Settings → Install in your GeoSwap dashboard and click Verify Installation.
A green checkmark means you are live and ready to create rules.
Custom code does not run in the Webflow Designer
You will not see GeoSwap working in the Webflow Designer preview. This is a Webflow limitation — custom scripts only run on the published site. Always test on your published URL.
Using GeoSwap with Webflow
Geo Redirects
Redirect visitors from specific countries to different pages or domains. Set up rules in the GeoSwap dashboard — no changes to your Webflow project needed beyond the initial script installation.
Content Personalization
Show different text, images, or sections to visitors based on their location. GeoSwap uses CSS selectors to find and swap content on your page.
Tip: Use custom attributes for reliable targeting
Webflow class names can change when you restyle elements. For reliable targeting, add a custom attribute to elements you want to personalize. Select the element in Webflow, open the Settings panel (gear icon), and add a custom attribute:
Webflow Element Settingshtml
<!-- Add this custom attribute in Webflow's element settings -->
Name: data-geoswap
Value: hero-textThen in GeoSwap, use the CSS selector [data-geoswap="hero-text"] to target that element. This works even if you rename or restyle the element later.
Page-Specific Scripts
If you only want GeoSwap on specific pages (not site-wide), you can add the script to individual pages instead of the project settings:
Select the page in Webflow's Pages panel.
Click the gear icon to open page settings.
Scroll down to Custom Code and paste the GeoSwap script in the Head Code section.
Best Practices
Always add the script to the Head Code section, not Footer Code. GeoSwap needs to load early for redirects to work before the visitor sees the page.
Use custom attributes (data-geoswap) instead of class names for content personalization rules. Class names can change during restyling; custom attributes are stable.
Test on your published site, not in the Designer preview. Webflow does not execute custom code in the Designer.
GeoSwap works on Webflow's free hosting plan. No paid plan is required for custom code in project-level settings.
Next up
Create your first geo redirect or content personalization rule.