Tech | Live Site to Designer

TECHNICAL NOTES

For the WFX development team.

Goals:

Navigate from live site page to the designer in a new tab
Find page on site
Quickfind specific article
Find all pages with specific text
Find all pages with out-of-sync translations

Core Implementation

We want to construct this —


https://ponsonbydoctors.design.webflow.com/
  ?locale=en
  &pageId=62296a1920ec6647f04208ef
  &itemId=6372c946cfa1f92b809ce59b

Extraction approach:

Shortname. Extracted from CSS / JS path.
- For Hyperspeed-proxied sites, we need an alternative approach.


<link href="https://cdn.prod.website-files.com/5a443b83f6b9a40001be39fe/css/snzi.fb1ee9378.css" rel="stylesheet" type="text/css">

Locale (optional?) From <html lang>
PageID. From <html data-wf-page>
ItemID. Could potentially determine this through a lookup using <html data-wf-item-slug> through the Webflow API to obtain the Item ID. The Collection ID and Site ID would also be used here.
- Consider building this into Hyperflow Central Services for better resolution.

For reference, here is a typical <html> element in Webflow:


<html
  data-wf-domain="www.ponsonbydoctors.co.nz"
  data-wf-page="62296a1920ec6647f04208ef"
  data-wf-site="62296a1920ec667f814208e2"
  data-wf-status="1"
  lang="en"
  data-wf-collection="62296a1920ec660a09420959"
  data-wf-item-slug="profhilo-structura"
  class="w-mod-js wf-dmsans-n4-active wf-active w-mod-ix"
  >

Alternative Shortname Approaches

Webflow API, through Hyperflow Central Services
Explicit HEAD settings


<script type="sygnal/wfx">
{
  "shortName": "sygnal"
}
</script>

Relevant URL Forms

Site Settings

Publishing:


https://webflow.com/dashboard/sites/sygnal/publishing

Site Usage:


https://webflow.com/dashboard/sites/sygnal/usage

SEO:


https://webflow.com/dashboard/sites/sygnal/seo

Fonts:


https://webflow.com/dashboard/sites/sygnal/fonts

Backups:


https://webflow.com/dashboard/sites/sygnal/backups

Apps & Integrations:


https://webflow.com/dashboard/sites/sygnal/integrations

Custom Code:


https://webflow.com/dashboard/sites/sygnal/custom-code

Tech | Live Site to Designer

Core Implementation

Navigation from Live/Staging to Designer

Alternative Shortname Approaches

Relevant URL Forms

Site Settings