Preview page layout guides

SOLVE
NPeters
Contributor

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:

 

Screenshot 2021-06-10 at 23.44.51.png

 

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

 

0 Upvotes
1 Accepted solution

Accepted Solutions
Sjardo
Solution
Contributor | Diamond Partner

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. 


Best,

Sjardo Janssen
Front-end developer & UX Designer

Bureau Vet - Sjardo.nl

Did my post solve your question? Help the community by marking it as a solution

View solution in original post

1 Reply 1
Sjardo
Solution
Contributor | Diamond Partner

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. 


Best,

Sjardo Janssen
Front-end developer & UX Designer

Bureau Vet - Sjardo.nl

Did my post solve your question? Help the community by marking it as a solution

View solution in original post