Webflow integration

Offer localized pricing to Webflow in a few minutes thanks to Pricery.

Add the Pricery JS snippet in your header

Go to your Webflow project's settings and copy/paste your JS snippet.

<script>
window.PRICERY_API_KEY = "your-pricery-public-key";
(function() {
    const script = document.createElement("script");
    script.src = "https://www.pricery.io/pricery.js";
    script.async = true;
    document.getElementsByTagName("head")[0].appendChild(script);
})();
</script>

You can find your Pricery API key in your Account's settings.

Paid projects only: Webflow only allows paid projects to add JS snippets in the header.

Add data-elements to display your prices information

To display on your Webflow website, Pricery needs to know where to put each piece of information: Price amount, currency symbol, link to which to redirect people clicking on the buy button, etc.

All it takes is adding pricery data-elements to the HTML code of your editor:

All these steps are similar to what non-Webflow users should do and are detailed in other sections. But in a nutshell, here are the 4 types of data-elements that you will need:

• data-pricery-product="..." This is where the Stripe ID of each one of your product's Stripe ID must go. It indicates to Pricery the parent <div> of each product. Read more.

• data-pricery-content="..." The value of this data element lets you customize which information to display: Amount, currency symbol, etc. You can find a list of every available information to show on your page here.

• data-pricery-href="..." Put this on the buy buttons of each one of your prices. More information about handling URLs this here.

• data-pricery-button="..." This will turn your buttons into a switch between monthly and yearly prices. More about switch buttons here.

That's it!

Webflow makes it extremely fast to offer localized prices to your visitors. Now, go to the Pricery interface and start deploying new currencies in every country in the world!