[Branko KParticipant]

I’m trying to add the following script to my site latour-vail.com/newsite:
<script type="text/javascript" src="https://secure.opentable.com/frontdoor/default.aspx?rid=2643&restref=2643&bgcolor=000000&titlecolor=ededed&subtitlecolor=ededed&btnbgimage=https://secure.opentable.com/frontdoor/img/ot_btn_red.png&otlink=FFFFFF&icon=light&mode=wide&hover=1"></script><a href="http://www.opentable.com/la-tour-reservations-vail?rtype=ism&restref=2643" class="OT_ExtLink">La Tour (2643), Denver / Colorado Reservations</a>

Using the Raw JS shortcode, the result is supposed to look like this (except for the colors):

But instead the layout gets all broken:

I’ve read you don’t provide support for third party elements, but the code seems just fine to me and we’ve used it just fine with other themes. I talked to OpenTable people, too, and they haven’t seen this happen before. Would you have a tip for me on how to fix this?

Looking forward to hearing from you,
Branko

[RadModerator]

Hi Branko,

Thanks for writing in!

Do this instead of adding it in customizer’s custom javascript.

Add this code at your child theme’s functions.php

add_action('wp_footer', function(){ ?>

<script type="text/javascript" src="https://secure.opentable.com/frontdoor/default.aspx?rid=2643&restref=2643&bgcolor=000000&titlecolor=ededed&subtitlecolor=ededed&btnbgimage=https://secure.opentable.com/frontdoor/img/ot_btn_red.png&otlink=FFFFFF&icon=light&mode=wide&hover=1"></script><a href="http://www.opentable.com/la-tour-reservations-vail?rtype=ism&restref=2643" class="OT_ExtLink">La Tour (2643), Denver / Colorado Reservations</a>

<?php }, 9999999 );

Hope this helps.

[Branko KParticipant]

Thank you!

So I add this in my child theme’s functions.php, and then also add the original piece of code through Add Raw Javascript shortcode?

And what is it that was causing the problem?

Have a great one!
Branko

[RadModerator]

Hi Branko,

The issue could be from another styling or script, so calling it to the very last may solve it. But not 100% since it’s a 3rd party plugin.

You don’t have to use raw javascript shortcode anymore when the code is added.

Thanks.

[Branko KParticipant]

Thanks for the insight.

Looking at your piece of code, am I right expecting that it will add the reservations widget into the footer? I’m making a long one-page navigation site and I need to be able to set which section it will appear in. It’s not meant to be in the footer.

Hope I’m asking a good question here,
Branko

[AlexanderKeymaster]

Hi Branko,

Sometimes linking the javascript through the footer, will resolve script conflicts. From the looks of this now, its more of a CSS conflict. Your third party plugin isn’t using specific enough styling, so some of the general theme styling is bleeding through.

Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[Branko KParticipant]

I see. The bad thing is that the original developer does not have support as epic as yours. I’ll put it inside the footer I guess. Thanks for your time!

[Kosher KMember]

Hi There,

You may want to add this code in Customizer -> Custom -> CSS

#OT_form * {
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
}
.OT_title {
	font-family: Arial;
	font-weight: bold;
}
.OT_subtitle {
	font-family: Arial;
}
.OT_wrapper input {
	background-color: #fff;
	height: auto;
	font-size: 12px;
}

Hope that helps

[Author]

Posts