Data Tags

Data tags are specific attributes attached to elements, like text, links, or buttons, on the paywall webpage.
These are recognised by a special script called Paywall.js that interprets user feedback and transmits information to and from the SDK. In addition, when you configure your paywall webpage on the Superwall dashboard, the dashboard instantly recognizes the data tags you’ve provided. From there you can edit the text that appears in the tagged elements.

There are seven different types of data tag:

data-pw-varThe reference name of the element, e.g. "Title".This indicates to Superwall that the element should be remotely configurable. The Superwall dashboard will create an editable text field for this element. The reference name of that text field will be equal to the value you provide.
data-pw-closeAdd anything as a value. It's ignored.Closes the paywall.
data-pw-restoreAdd anything as a value. It's ignored.For restoring purchases, if you bought on a different device.
data-pw-purchaseEither primary, secondary, or tertiary.This relates to your primary, secondary, or tertiary product set up in the Superwall dashboard respectively. When the tagged element is tapped, it tells the SDK to initialize a purchase of the specified product.
data-pw-open-urlA valid url. E.g. href links do not work in a paywall. However, attaching this tag to an element opens the provided url.
data-pw-open-deep-linkA valid deep link url. E.g. fb://profile/33138223345.Opens a deeplink from a button on a paywall.
data-pw-customA name for a custom actionWhen the tagged element is tapped, the SDK calls its delegate method handleCustomPaywallAction(withName:). The value you provide is passed to the function, from which you can perform custom logic. Check out Custom Paywall Buttons for more.

Adding Data Tags to an Element in Webflow

To add a data tag in Webflow, select the element then click the cog wheel in the top right to open the Element Settings panel. In Custom Attributes, click the + icon:

Then fill out the data tag Name and Value and click Save:

That's it! Here are a few examples of what data tags look like in the webpage HTML:

<! –– A data tag specifying a templatable title.  ––>
<h1 data-pw-var="title"></h1>

<! –– A data tag specifying that the element should dismiss the paywall ––>
<div data-pw-close="anything"></div>

<! –– Same as above ––>
<div data-pw-close></div>

Did this page help you?