Problem in embedding the brand page

From the share botton I copied the embed code and placed it in my WordPress website page. I tryed it with blocks edidor, the old editor and in Elementor page builder. All is showing the embed code in a very small and limited height. Whatever I did I wasn’t successful in showing it on the full page!

Any fix for that?

1 Like

Following.

1 Like

This is usually due to settings by the content software you are using. For best results, you should embed it on a completely blank HTML page. It looks like in your case there is a wrapping element that limits it by height. You can try changing the CSS to use viewport units.

Try changing:

#bl-embedded-brand-guide {width: 100%; height: 100%;}

To:

#bl-embedded-brand-guide {width: 100vw; height: 100vh;}

Unfortunately I’m not familiar enough with WordPress to give you a rock solid answer. Let me know if this works :slight_smile:

3 Likes

Thank you for your reply.

Only changing the height to “height: 100vh” was enough (changing the width to “width: 100vw” broke the page’s boxed design). And the problem is fixed. Thank you :pray:

Note: Now I’m facing another strange behavior.

When I’m opening the website’s page in Chrome Incognito I’m not able to view the iframe inside the page.

It is showing the page (header and footer) but without the iframe contents. Instead of the iframe, it’s showing the following error message:

I tried on 2 different websites, the same results. I’m using Chrome’s last version.

I tried in Microsoft Edge Private browser, everything was working fine though.

Not that important, but I wanted to share my experience. And, it’s better if we know the reason at least.

2 Likes

Glad to hear 100vh worked.

That incognito problem is indeed a strange one. Not sure what could be causing that. Could you reach out to me using the chat widget on https://baseline.is and send me a link to your page so I can investigate? Or if you are ok with sharing the link here that’s fine also.

1 Like

Sure, her is the link: Brand Guideline - VANLIX Marketing

1 Like

This seems to be related to Chrome blocking third-party cookies in Incognito by default, and the fact that our framework uses cookies for authentication and breaks when trying to load the page due to that.

I’m not sure how to solve this at the moment but I’ll continue to investigate and hopefully find a solution. But at least it’s only happening when viewing an embedded brand guide while in incognito mode in the Chrome browser, so hopefully not a common occurrence.

2 Likes

@gilli BTW, during the page load of the embedded brand guidelines, there’s a flash of Baseline logo. Could that be avoided by any chance? Not a big deal, just curious.

1 Like

That is our loading spinner, I think for now we will keep it since it’s pretty integrated into the whole app. I’ll add it to my todo list though to see if it makes sense to change it in that particular place :slight_smile:

2 Likes

ok sounds good. Thanks

2 Likes

@gilli In the embed code I don’t even see these lines

#bl-embedded-brand-guide {width: 100%; height: 100%;}

I am having a similar issue of brand guidelines are not showing up.

I have pinged you on the chat but still waiting for some help.

Thanks,
Anil

1 Like

I’ve replied to your support chat. But those lines are not relevant anymore. We’ve improved the embed code so it automatically adjusts the iframe to the brand guide size. However there have been some issues when people use plugins in WordPress that try to optimize the code but in doing so break the functionality.

1 Like

ok Thanks, @gilli. Pretty much most optimization plugins do the same thing and I have not run into such problems that couldn’t be solved by specify width and height. But Baseline embed code is just not budging no matter what I try :wink:

1 Like

@gilli maybe I could specify an exception for Baseline embed code or the iframe code? Not sure if I have that option

1 Like

@gilli I have sent you a msg on support chat. I created a short video as to the current state of how the embedded guidelines page looks. Please take a look when you get a chance and let me know your feedback. Thanks!

2 Likes

I’ve replied. Let’s continue our chat there :slight_smile:

1 Like