Preview page layout guides

NPeters — Thu, 10 Jun 2021 22:53:25 GMT

In an effort to provide a way to help my teams content editors create consistent layouts with DnD modules and pages, taking some inspiration from CodyHouse I have been able to overlay a guide:

The site is not live, but when it is I would like to enable a feature to toggle on or off the grid overlay.

Typically in a cms, I would utilise some form of user_logged_in value to detect. As I see from aonther thread HubSpot does not support this standard feature.

I am keen to know are there any possible hooks that would allow me to only inject the grid when a editor is viewing the page in the editor and or the preview.

So far I have been using javascript to detect a Hubspot specific UI component such as the toolbar. But I would like a solution that is less hacky.

TBH - I think this could be a useful Hubspot feature in general 🙂

Thanks

Re: Preview page layout guides

Sjardo — Fri, 11 Jun 2021 12:37:59 GMT

Hi!

Sadly, there is not really a nice way to check if you are logged into to the site as a HubSpot user. They way we do this, is with a quick jQuery script in case of need (fairly easy to rewrite to Vanilla JS):

lookupInterval = setInterval(function() { if ($('.hs-tools-menu').length > 0) { // Form is rendered, stop looking clearInterval(lookupInterval); hsLoggedIn(); } }, 100); function hsLoggedIn() { $('body').addClass('hs-logged-in'); }

An other easier JS option would be this script, that checks if your in the HubSpot Editor:

if (window.hsInEditor) { // something something }

Another option is doing some tricky stuff with the Visitor api: https://developers.hubspot.com/docs/api/conversation/visitor-identification by identifieing who's talking. Yet, this might be solid in the future, for now it will give you hard time to set up.

For now, I suggest creating a simple modules that enables / disables the grid and place it on the top of the page. If you set it "on", it shows a grid that overlaps on the whole page / DND editor.

The best would be, indeed, a simple function that would let you check if your logged in or not! a simple is_user or is_admin variable would be sufficient.

topic Preview page layout guides in CMS Development

Preview page layout guides

Re: Preview page layout guides