search
⭐️ Download it for Chrome ⭐️

Tech | Live Site to Designer

Navigate more efficiently through the Webflow ecosystem

circle-info

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

hashtag
Core Implementation

hashtag
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.

  • 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;

hashtag
Alternative Shortname Approaches

  • Webflow API, through Hyperflow Central Services

  • Explicit HEAD settings

hashtag
Relevant URLs Forms

hashtag
Site Settings

Publishing;

Site Usage;

SEO;

Fonts;

Backups;

Apps & Integrations;

Custom Code;

PreviousNavigation ⭐️NextTech | Showcase to Designer

Last updated