Webflow Preview Link

webflow-demo

View Demonstration in Webflow

Enables you to dynamically construct a Webflow preview link to the current page.

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.2/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.