Lodgify Widget not Displaying Correctly

Hello,

The Lodgify widget is not displaying correctly. 

The code for the widget from the website is :
 

<style>
:root {
  --ldg-psb-background: #ffffff;
  --ldg-psb-border-radius: 0.42em;
  --ldg-psb-box-shadow: 0px 24px 54px 0px rgba(0, 0, 0, 0.1);
  --ldg-psb-padding: 14px;
  --ldg-psb-input-background: #ffffff;
  --ldg-psb-button-border-radius: 0px;
  --ldg-psb-color-primary: #fac600;
  --ldg-psb-color-primary-lighter:#fde380;
  --ldg-psb-color-primary-darker: #7d6300;
  --ldg-psb-color-primary-contrast: #333333;
  --ldg-semantic-color-primary:  #fac600;
  --ldg-semantic-color-primary-lighter: #fde380;
  --ldg-semantic-color-primary-darker: #7d6300;
  --ldg-semantic-color-primary-contrast: #333333;
}
#lodgify-search-bar { 
  position: relative;
  z-index: 999999;
  width:100%;
}
</style>
<div
  id="lodgify-search-bar"
  data-website-id="515719"
  data-language-code="en"
  data-search-page-url="https://jannetta.lodgify.com/en/all-properties"
  
  data-dates-check-in-label="Arrival"
  data-dates-check-out-label="Departure"
  data-guests-counter-label="Guests"
  data-guests-input-singular-label="{{NumberOfGuests}} guest"
  data-guests-input-plural-label="{{NumberOfGuests}} guests"
  data-location-input-label="Location"
  data-search-button-label="Search"
  
  data-new-tab="true"
  data-version="stable"
></div>
<script src="https://app.lodgify.com/portable-search-bar/stable/renderPortableSearchBar.js"></script>

there is no header/footer code on the website,very little CSS, the plan is Business.

Password to the website is : underconstruction

Website: https://jannettasbb.squarespace.com/book-your-stay

Thank you!

Anele

It looks like the problem is with the code from lodgify, can they provide you with any support?

1 hour ago, Anele0610 said:

The Lodgify widget is not displaying correctly. 

Hi @Anele0610 I don't generally see any issues with the Lodgify Search Bar on Squarespace sites. I did check your specific code by pasting it into another Squarespace site, it worked fine:

Yet when I load your Squarespace website, I see this, where it attempts to show it correctly and then loses the styling:

As this appears to be specific to your Squarespace website it's really difficult to troubleshoot remotely but, as a first step, I recommend removing all other custom code (from Custom CSS, and from other Code Blocks or Embed Blocks on the same page) to see if this helps you to identify the cause.

Did this help? Please give feedback by clicking an icon below  ⬇️

21 hours ago, paul2009 said:

Hi @Anele0610 I don't generally see any issues with the Lodgify Search Bar on Squarespace sites. I did check your specific code by pasting it into another Squarespace site, it worked fine:

Yet when I load your Squarespace website, I see this, where it attempts to show it correctly and then loses the styling:

As this appears to be specific to your Squarespace website it's really difficult to troubleshoot remotely but, as a first step, I recommend removing all other custom code (from Custom CSS, and from other Code Blocks or Embed Blocks on the same page) to see if this helps you to identify the cause.

Did this help? Please give feedback by clicking an icon below  ⬇️

Hey Paul,

Yes, I see it too. It's extremely frustrating, because this is a new page, no other code blocks or embed blocks. I deleted custom CC, it didn't affect anything. There is no header and footer code injected. There is no API added... I honestly have no clue where to go from here.

I added the code block to another website i have and it displays normally. So it seems the problem is with the exact website i need it to be on?
Any advice on what else it could be?
The support from Lodgify has not yet responded..

Thanks for thinking with me!

5 minutes ago, Anele0610 said:

So it seems the problem is with the exact website i need it to be on?
Any advice on what else it could be?

I would contact Sqsp and ask them to clear the site cache on their backend to see if this resolves the issue. 

6 hours ago, paul2009 said:

I would contact Sqsp and ask them to clear the site cache on their backend to see if this resolves the issue. 

The cache has been cleared and nothing changed... Any other ideas?
Is there a way to reset website settings but keep the design? I'm so confused on this one..

Hey, anyone with any other suggestions?
Lodgify is saying it's a Squarespace problem, since from their end everything is provided and working and Squarespace support is directing me to this forum, after clearing the cache they can't do anything extra 😞 

@tuanphan @paul2009

On 6/10/2024 at 8:54 AM, Anele0610 said:

Lodgify is saying it's a Squarespace problem

This isn't a Lodgify problem because the code works on other Squarespace websites. It also isn't a generic Squarespace issue for the same reason! Is it possible that you have a lightbox contact form with reCAPTCHA enabled on the same page? This can sometimes cause this issue.

Hello!
I have found what it was - there was a lightbox contact form in the footer that had the Google CAPTCHA turned on, and the jss was conflicting with it.

So this is for anyone who might be experiencing the same issue int he future.
Thank you everyone for thinking with me!

On 6/12/2024 at 12:34 PM, Anele0610 said:

Hello!
I have found what it was - there was a lightbox contact form in the footer that had the Google CAPTCHA turned on, and the jss was conflicting with it.

So this is for anyone who might be experiencing the same issue int he future.
Thank you everyone for thinking with me!

Thank you SO MUCH for figuring this out! You just saved me hours of work. Cheers!