webflow-statsig
v0.2.1
Published
Integrate Statsig Feature gates for gating webflow tabs
Downloads
10
Readme
webflowAdapter
This adapter allows Webflow projects to use Statsig Feature Gates to control the user experience and run A/B tests.
https://github.com/statsig-io/webflowAdapter/assets/111380336/7332f46c-8591-417c-ada7-8a3fc6e48d36
Instructions
- Open Project Settings from the "W"/Hamburger menu on the top left of the designer.
- Choose Custom Code Tab and paste the following in there. Make sure to replace [CLIENT-SDK-KEY] with the right key that's available from your Statsig project settings.
<script src="https://cdn.jsdelivr.net/npm/webflow-statsig/dist/statsigWebflow.min.js?key=[CLIENT-SDK-KEY]"></script>
- In the designer where you want to test two different user experiences, insert a
Tabs
component
- Select the newly inserted
Tabs
component and in the Settings pane, add a Custom Attribute data-gateid and set the value to be the Feature Gate Id. NOTE: Make sure you select theTabs
component, NOT theTabs Menu
orTabs Content
- Hide the
Tabs Menu
so it's not visible to the user
Now, add the controls in
Tab 1
for the default experience (fails gate), andTab 2
for the new experience (passes gate).Publish and test the page! Changing the gate's targeting should be reflected in the experience when you refresh the page.
TIP: To properly run split assignments, make sure your Feature Gate uses Stable ID
in order to treat your page visitors as unique users.