Before we start, I'd like to acknowledge and thank Zinc for providing the solution to the issue. This is explained in STEP 3 - COPY, FIX YOUR WIDGET CODE ...
INTRODUCTION
So you, or your Client, want to put in a Tripadvisor Widget, which is “A stand-alone application that can be embedded into third party sites by any user on a page where they have rights of authorship (e.g. a web page, blog, or profile on a social media site).”
Tripadvisor provides a number of widgets. This is an example and instructions on how to apply one of them. But it will give you the idea if selecting an alternative.
PROCEDURE
STEP 1 - GET ACCESS TO THE CLIENT'S TRIP ADVISOR:
A For security reasons, Tripadvisor requires you to gain authorised access to a Client's Tripadvisor before you can choose and apply a Tripadvsor widget to your Client's website.
B In this procedure, you will be selecting Verify Your Identity by Phone, your Client will receive a code on their cell/mobile/fixed phone - whichever one they used as a phone number for their business when they created their Tripadvisor.
C Therefore, it's ideal to be sitting with your Client with their cell/mobile/fixed phone available. Plus, it allows you both to agree on which Tripadvisor widget will be used before you apply it to their website.
D Click on THIS LINK to visit the Tripadvisor Widget site - you will see the following web page:
E Now start type in your Client's business name in the Search for your business field - it will probably be listed before you finish typing the whole name. For example:
F Select your Client's business name from the drop down list - You will now be presented with a range of available Tripadvisor widgets for your Client's business - but with a Claim Your Listing modal layer over the top.
G Complete the (at least) mandatory input fields as follows:
a - First Name - your first name
b - Last Name - your last name
c - Business Phone - your phone number
d - Business Email - your email address ### OPTIONAL ###
e - Role at Business- select Agency Consultant
f - Preferred Email Language - select the appropriate one from the list
H Click/tape to tick the three check boxes. Should look something like this:
I Now click on the Continue button - you will be presented with a Verify Your Identity pop up:
J Click on the Phone button - Your Client will receive an automatd call with a code number - have them write that down.
H You will be presented with a screen prompting you to submit the code number - enter the code and complete the prompt.
I You should then be presented with a Congratulations pop up.
J Close that Congratulations window - you can now see the available widgets:
STEP 2 - SELECT AND TAILOR YOUR WIDGET
A Select the Review Snippets by clicking/tapping on it:
B You will now be presented with a page that allows you to tailor the Preferred language (of the widget), Preferred (display) size and other self explanatory (by tick) options, The code that you need to embed in the Client's website and Tripadvisor's Terms and Conditions:
What width you select (you only have two options with this widget) will depend on how you have laid out your website. But if you select the 468px wide widget you will need to embed a separate one for view ports smaller than 468 pixels.
STEP 3 - COPY, FIX YOUR WIDGET CODE
A - Copy the code displayed at the bottom of the screen:
B - Open Notepad, or any other suitable txt editor and paste the code:
NOW THE ISSUE - If you apply the code as it is, you will get THIS:
Notice that there is a very undesirable initial display of a large Tripadvisor logo - Not good on your Client's website!
Now we are going to fix this!?
The reason for this, is there is a piece of html code that displays a large Tripadvisor logo, here it is:
CODE IMAGE 1:
CODE IMAGE 2:
WHAT IT DISPLAYS
So the next step is to carefully remove (delete) that html string, within Notepad etc where you copied and pasted the Tripadvisor supplied widget code.
Once you have removed the logo code, it should look like this:
CODE IMAGE -
WHAT IT DISPLAYS
STEP 3 - APPLY YOUR FIXED WIDGET
Now that we have fixed the widget code, it is time to insert the widget into your website.
A - Insert a HTML Container into your layer, layout grid etc - make sure the width of the container is whatever width you selected in STEP 2 - B.
B - Copy and paste the code into the HTML container.
C - Leave the Type: field as Use <div. to set position and size of the HTML
D - Click the OK button.
E - Your page should look something like this when previewed or FTP'ed:
CODE IMAGE -
