# Preview page layout guides

**URL:** <https://community.hubspot.com/t/preview-page-layout-guides/38757>\
**Category:** CMS Development\
**Tags:** javascript\
**Created:** [June 10, 2021, 10:53pm UTC](https://community.hubspot.com/t/preview-page-layout-guides/38757 "2021-06-10T22:53:25Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![NPeters](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/npeters/32/5125_2.png) [@NPeters](https://community.hubspot.com/u/NPeters)\
**Post date:** [June 10, 2021, 10:53pm UTC](https://community.hubspot.com/t/preview-page-layout-guides/38757/1 "2021-06-10T22:53:25Z")

</div>

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](https://codyhouse.co/ds/components/app/grid-background) I have been able to overlay a guide:

 ![Screenshot 2021-06-10 at 23.44.51.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/c/dcdc52c3a04452264787872101a7d39f70db7d01.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

---

<div class="post-metadata">

**Author:** ![Sjardo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sjardo/32/52178_2.png) [@Sjardo](https://community.hubspot.com/u/Sjardo)\
**Post date:** [June 11, 2021, 9:43am UTC](https://community.hubspot.com/t/preview-page-layout-guides/38757/2 "2021-06-11T09:43:41Z")

</div>

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):

```lia-code-sample
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:

```lia-code-sample
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](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 i_s\_user_ or _is\_admin_ variable would be sufficient.