Enables you to dynamically construct a Webflow preview link to the current page.
What is a Preview Link?
In Webflow, a preview link is a special link that allows someone to view a read-only version of your Webflow site in the designer.
What would you Use this for?
If you develop Webflow sites, and want to make it easy for someone to click a button that switches the current page into a design mode view, this utility enables that.
How to Use it
- You must have created a preview link to your site, and extract the preview link Id. It looks something like this-
4d388483d99c6cc36c58ae966e92c615.
Limitations;
- Does not work with Collection pages, since they require an additional collection item ID that is not emitted into the page.
Implementation
- Add this script
<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@4.11/src/nocode/webflow-demo.js"></script>
-
Add any links in the page, that you want to point to the designer view.
-
Set the href to the default designer link generated by Webflow.
-
Add a custom attribute of
wfu-demo-link=preview
Best practices;
- Put in the site-level configuration so that it appears on all pages. Then you can choose which pages actually utilize it.