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:
|The 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.|
|Add anything as a value. It's ignored.||Closes the paywall.|
|Add anything as a value. It's ignored.||For restoring purchases, if you bought on a different device.|
|Either ||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.|
|A valid url. E.g. ||Normal href links do not work in a paywall. However, attaching this tag to an element opens the provided url.|
|A valid deep link url. E.g. ||Opens a deeplink from a button on a paywall.|
|A name for a custom action||When the tagged element is tapped, the SDK calls its delegate method |
|This prevents an element's text from being edited. It tells Paywall.js to keep looking into the element's children for more |
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>
Updated 3 months ago