Preview page layout guides

[NPeters]

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

[Sjardo · Accepted solution]

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.