⭐️ Download it for Chrome ⭐️

Tech | Live Site to Designer

Navigate more efficiently through the Webflow ecosystem

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

Navigation from Live/Staging to Designer

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-dmsans-n5-active wf-dmsans-n7-active wf-poppins-n4-active wf-poppins-n5-active wf-poppins-n6-active wf-poppins-n7-active wf-poppins-n8-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 URLs 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

PreviousNavigation ⭐️NextTech | Showcase to Designer

Last updated