Streaming live at 10am (PST)

How to get the internal Webflow pageId and itemId from within a page

This is no doubt an unusual question.

Within a Webflow page, in custom code or in HTML embeds, is there a way to get the internal Webflow Page ID, and the internal Webflow Item ID ( when on a CMS page )?

I’m referring to the internal ID’s that you’d see through the APi, like this

pageId = 6152ed4e17029a7827f31077
itemId = 6154f7e74b795432366e045a

I’m hopeful there is some undocumented internal tag formation I can use, such as {{ webflow.ItemID }}

I know you’re going to ask why, and there are several reasons, but right now this is the main one.

It happens that I am building a demo site for webflow tips & techniques. Often in the demo pages, I want to show the internals for that page so people can easily see how that page was built.

To do that I’ll embed a readonly preview link, but I’d like to form the link so that it points at the page they are currently on. That requires a pageId and possibly and itemId, to create the URL.

https://preview.webflow.com/preview/sygnal-webflow-utils
?utm_medium=preview_link&utm_source=designer&utm_content=sygnal-webflow-utils
&preview=4d388483d99c6cc36c58ae966e92c615
&pageId=6152ed4e17029a7827f31077
&itemId=6154f7e74b795432366e045a
&workflow=preview

Nope. The only way would be for you to use two fields in a collection and manually add the data (or programmatically using the API on a node server or language of your choice. Then you could access that in your front end. Just remember that if you EVER restore a backup that data will change.

Thanks Jeff, yes I’ve discovered that backup-restore issue also. Losing those IDs breaks all of my Zapier wiring.

On this problem, I’ve found a partial solution. Webflow actually emits the siteId and pageId in the HTML as attributes of the <html> element- so it’s easy to build direct-to-page share links.

For example if you create a button with an ID of previewLink, this jQuery code will construct and apply the current page’s direct preview link;

var previewId = `YOUR PREVIEW ID HERE`;
var pageId = $("html").attr("data-wf-page");
$("#previewLink").attr("href", 
      `https://preview.webflow.com/preview/sygnal-webflow-utils?utm_medium=preview_link&utm_source=designer&utm_content=sygnal-webflow-utils&preview=${previewId}&pageId=${pageId}&workflow=preview`
      );

Unfortunately on Collection Pages, the itemId doesn’t appear in a similar fashion.

I can see it in the API docs as _id and _cid;

https://developers.webflow.com/#get-all-items-for-a-collection

However it does not appear to be accessible through the normal HTML Embed insertion code, the way that other fields are, e.g.;

{{wf {&quot;path&quot;:&quot;_id&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}

I’ll give up on that for now. for this project, Page-level link is is more important to me than Collection Page linking since my code is unique to each demo. I’ll head down that path as far as I can.