Adjustable height for embedded widget

  • skn990

    (@skn990)


    4 years, 8 months ago

    Hello, I have embedded the Setmore widget into my website, however if I leave the code as is (provided by Setmore, with the URL for my booking page) the height of the container is about 2 inches tall and you can’t really read anything.

    I’ve gotten around this issue by setting the height to a fixed number (ie height=”
    2000px”) but I was wondering if there is a way to get the height of the widget to adjust depending on which step of the booking process the client is on?

    The first step when the client selects an appointment type doesn’t require the height to be very large, but the last step when they enter their personal information requires the widget’s height to be much taller.

    Here is the code provided by Setmore to embed the widget to my site
    <iframe src="your_booking_page_URL" scrolling="yes" width="100%" height="100%" frameborder="0"></iframe>

    • This topic was modified 4 years, 8 months ago by t-p. Reason: Moved to Fixing WordPress from Developing with WordPress

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • a2hostinglk

    (@a2hostinglk)

    4 years, 8 months ago

    You should be able to use 2000px (instead of 5) – is that not working for you?

    Looks like what you are doing is correct: https://support.setmore.com/en/articles/490991-embed-the-booking-page-on-your-website

    Thread Starter skn990

    (@skn990)

    4 years, 8 months ago

    Hi @a2hostinglk, thanks for reaching out.

    Like I mentioned in my post setting the height to 2000 works, however I was wondering if anyone has a recommendation to allow the height of the widget to change automatically depending on which stage of the booking process the client is on…

    corrinarusso

    (@corrinarusso)

    4 years, 8 months ago

    There are more than just the iframe elements on your page that are not set properly.

    But, you can start with this:
    Admin –> Customizer –> Additional CSS :

    .container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

    Add your iframe like this:
    <iframe class=”responsive-iframe” loading=”lazy” src=”https://booking.setmore.com/scheduleappointment/r387f1627676949086&#8243; scrolling=”yes” width=”100%” height=”100%” frameborder=”0″></iframe>

    But then you would need to adjust the inline block height (not set properly), from:
    <div style=”height: 50px;” aria-hidden=”true” class=”wp-block-spacer”></div>
    to:
    <div style=”height: 760px;” aria-hidden=”true” class=”wp-block-spacer”></div>

    https://postimg.cc/3WVQyqSt

    There is more going on here than just “fixing the iframe”.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Adjustable height for embedded widget’ is closed to new replies.

Tags