Webflow Preview Link

Add an adaptive preview link to your demo site, which will link to the correct page of your read-only preview.

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.

Demonstration

Demowebflow-smart-elements.webflow.io

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.

Future

Easy link to cloneable from shortname demo site

Cloning trigger option

e.g. current-user-info.webflow.io maps to

https://webflow.com/made-in-webflow/website/current-user-info

Implementation

Add this code to the before BODY of your site or page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/css/webflow-demo.css">
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/nocode/webflow-demo.js"></script>