# Webflow Preview Link

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

## What is a Preview Link? <a href="#what-is-a-preview-link" id="what-is-a-preview-link"></a>

In Webflow, a [preview link](https://university.webflow.com/lesson/share-your-project-and-invite-collaborators) 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? <a href="#what-would-you-use-this-for" id="what-would-you-use-this-for"></a>

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 <a href="#how-to-use-it" id="how-to-use-it"></a>

{% embed url="<https://webflow-smart-elements.webflow.io/demo>" %}

## How to Use it <a href="#how-to-use-it" id="how-to-use-it"></a>

* 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&#x20;

Cloning trigger option&#x20;

e.g. current-user-info.webflow\.io maps to&#x20;

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

## Implementation <a href="#implementation" id="implementation"></a>

Add this code to the **before BODY** of your site or page.&#x20;

{% code overflow="wrap" %}

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.4.0/dist/css/webflow-demo.css">
<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.4.0/dist/nocode/webflow-demo.js"></script>
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-demo/webflow-preview-link.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.