Adding opentable widget to header

Support
#1

Hi there,

I’m trying to add a script to the pro header builder. It works fine, but since it’s a javascript code, it breaks the content builder.

<script type='text/javascript' src='//www.opentable.com/widget/reservation/loader?rid=164868&type=standard&theme=wide&iframe=true&overlay=false&domain=com&lang=en-US'></script>

This is the code, what would be te right way to add this?

#2

Hello @Pbalazs89,

Thanks for writing in!

You can still insert this custom JS in the Header builder custom JS section. Simply insert this:

</script><script type='text/javascript' src='//www.opentable.com/widget/reservation/loader?rid=164868&type=standard&theme=wide&iframe=true&overlay=false&domain=com&lang=en-US'>

You need to close the script tag first and then the script and use the existing script closing tag of the custom JS of the theme to avoid any conflict. I know that this is confusing. This is way of override the header builder’s custom JS.

Please let us know how it goes.

#3

Hi, thanks for the help. That worked, no errors anymore, however, some weird reason, the slider jumped from the middle to the side. I tried adding flex items to accommodate this move, but nothing seems to make it budge. I created a subdomain and uploaded the site to: http://bigfish.ethermedia.hu

Could you have a look please?

#4

Hi @Pbalazs89,

I don’t see any slider from the home page. But maybe the cause of the issue is because there is no content, any change within the content will also change the height and will cause jumping. If not, please provide a video recording of what we should expect to see :slight_smile:

Thanks!

#5

Sorry, I do not know why I called it a slider, I meant the OpenTable widget is not positioned in the middle of the screen.

I made a short video to explain the issues I’m having: Inserting the script basically breaks Pro functionality. But this YT video will explain it better.

https://www.youtube.com/watch?v=6kyqdEzYJ9E&feature=youtu.be

Thanks, any help is appreciated!!

#6

Hi @Pbalazs89,

The code should be exactly as this since it’s added in text element,

<script type='text/javascript' src='//www.opentable.com/widget/reservation/loader?rid=164868&type=standard&theme=wide&iframe=true&overlay=false&domain=com&lang=en-US'></script>

And based on your video, there is extra </div>, please remove it.

What’s Ruenel provided is correct too if you added it in header’s custom JS instead of text element. And it’s moving to the right due to left 50% margin added to the text element. If you plan of adding narrow width to the text element then it should be applied as max-width instead of margin.

I went ahead and fix this, it should serve as a sample too :slight_smile:

Before

After

I also changed the flex setting of the container to make sure it’s centered. I changed it from Standard to Fill Space.

Hope this helps.

#7

I’m forever in your debt.

Quick question regarding the implementation:

You guys said that I should add this code to the Header Builders Custom JS section. Are you referring to this part?

Because in that case, how would it render in the middle of the header? I might be misunderstanding something but this JS code only renders where it is placed, that’s why I thought a TEXT ELEMENT would work and Header JS would not. Please let me know!

Thanks again!

#8

Hey @Pbalazs89,

The Text element or a Content Area element are the correct element’s to use for scripts that should render in the content area. You’ll only want to use the Custom JS for functions or adding libraries.

Regarding adding the code in Header’s Custom JS, please forget about that because:

  1. It will not render in the header content but inside the <head> tag which of course will not render in the page.
  2. You should not add script tags in the Custom JS area whether it’s in the Header, Footer, Content, Theme Options, etc. What Ruenel said looks like just a hack. Since you have posted the script in your first post, it should have been tested in a test site or at least clarification on where the script must be added should have been asked before giving a suggestion. I’ll bring this up with him. We’re sorry about that.

Thanks.

#9

Thanks for getting back to me! Appreciate the help!

#10

Glad we could help,

Cheers!

#11

Hi there,

Unfortunately the implementation does not work 100%.
If the javascript code is added, it sort of interferes with PRO.
Here are a couple of screenshots with the console while the code is added in the header:

The code currently in the text element looks like this:

Any ideas?

#12

Hey @Pbalazs89,

Regretfully, we couldn’t help with third-party script conflicts with Pro. This is why we disabled the preview of third-party bundled plugins because it’s not feasible to take into account different ways custom scripts render.

The easiest way solution for this would be to temporarily remove the third-party script when you’re going to work on your header.

Thank you for understanding.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.