How To Use Wish To Go Plugin
Click the link for an installation guide of the Wordpress plugin for the Travel Planner
Installing Wish To Go in your blog is really easy. We provide several widgets in the form of an HTML tag. The WishWidget shows a heart next to posts destinations where the reader can click to add them to the Travel Bucket List. The ShareTripWidget is used to share the travel blogger trips with their readers.
TravelPlanWidget is used to implement the Trip Planner in your blog. Finally, the WishCounterWidget Tag Reference shows a heart with the number of selected destinations and by clicking on it, shows the Travel Planner.
tag at the bottom of your HTML document but still inside the
A very minimalistic webpage loading a WishWidget and the needed script is shown below:
<html> <body> <h1>My Entry Title</h1> <p> This is the entry body with a Wish To Go Heart. <WishWidget country="TH"></WishWidget> </p> <script src="https://cdn.wish-to-go.com/wish-to-go.main.js"></script> </body> </html>
</body> closing tag.
In some cases, the initialization of the script can fail because it is called before the page is rendered. This will likely happen when server side rendering is used.
wtgInit. If the WishWidget and TripPlannerWidget are not rendered properly, you can call the
wtgInit function somewhere in your webpage where you know the document has been rendered.
The WishWidget Tag
The WishWidget is used to show the wish heart tag
This configuration will identify a blog entry talking about Spain.
The WishWidget snippet can be placed in any part of your html page.
The following code shows just a few of the multiple places where you can insert the WishWidget. Only your creativity and imagination can put the limits.
<h1>My Post about Thailand <WishWidget country="TH"></WishWidget></h1> <p>The capital of the country is <strong>Bangkok <WishWidget country="TH" city="Bangkok"> </WishWidget> </strong> which has a vibrant nightlife </p> <h2>Things to do</h2> <ul> <li> Grand Palace <WishWidget country="TH" city="Bangkok" activity="Grand Palace"> </WishWidget> </li> <li> Wat Pho <WishWidget country="TH" city="Bangkok" activity="Wat Pho"> </WishWidget> </li> <li> Chatuchak <WishWidget country="TH" city="Bangkok" activity="Chatuchak"> </WishWidget> </li> </ul>
The code above will produce:
My Post about Thailand
The capital of the country is Bangkok
which has a vibrant nightlife
Things to do
- Grand Palace
- Wat Pho
In other to define the behaviour of the widget and the information to transfer to the Trip Planner, the WishWidget tag defines several attributes that you can use. All, except
country attribute are optional.
Country ISO code (recommended) or country name.
This is the only mandatory attribute. You should use the
country attribute alone to set a Country WishWidget1 which indicates that the wish refers to a country as a whole.
country attribute, when used with
activity attributes, helps to identify in which country is a city or an activity is carried out.
The example above will show in your post a Wish to go heart and the context semantics is referring to Spain as a whole country.
city attribute should be used along with
country attribute. It is used to specify that the wish heart refers to a city. A city is where the traveller will sleep. If you think the visit to a city or village can be done from another city in a one-day tour, it is better to specify it as an activity done from the sleeping city.
You should use a widely known name of the city in order to keep consistency along blog posts. For example, Bangkok is known to locals as Krungtep or Krungtep Maha Nakhon or even KMN but the most known around the world, even to the locals, is Bangkok. Although you are not obliged to use Bangkok, we recommend to use standardized English names as this name will be passed to flight, accommodation and tour search engines.
This city name has to be consistent in all your blog site. If you use different city names in the attribute, it will appear as different cities in the Trip Planner giving a bad user experience to your readers. In your post text, you can use any name to refer the city or even use the different names as the city is known. You only have to be consistent in the WishWidget attribute.
<p> We are talking about Bangkok or, as known to locals, <em>Krungtep</em> <WishWidget country="TH" city="Bangkok"> </WishWidget>. </p>
The above code produces:
We are talking about Bangkok or, as known to locals, Krungtep
The above snippet is telling to the system that the Wish to go heart is in the semantic context of the city of Bangkok in Thailand
An activity can be something the traveller can do at the destination. This includes monuments, spots, tours, courses or any other experience that can be done in a city or from a city.
An activity can be a city name if you recommend not to overnight there because it is better to visit in a day tour from another city. For example, there are many tours visiting the city of Amphawa (2 hours drive from Bangkok) and most of times the traveller will not overnight there but going back to Bangkok. You can use one WishWidget for the city, giving the opportunity to book accommodation from the Trip Planner and other WishWidget as an activity, allowing the traveller to book a tour.
Inserting this code:
<p> In the city of <strong>Amphawa</strong> <WishWidget country="TH" city="Amphawa"> </WishWidget> you can find the popular Amphawa Floating Market. The best way to visit the floating market is by hiring a <strong>one-day tour</strong> <WishWidget country="TH" city="Bangkok" activity="Amphawa"> </WishWidget> from Bangkok. They will take there in the morning and you will be back to Bangkok around 5 pm. Be sure you don't miss the boat ride along the <strong>Mae Klong River</strong> <WishWidget country="TH" city="Bangkok" activity="Mae Klong River Tour"> </WishWidget> at night time to see the fireflies flying along the riverside. </p>
In the city of Amphawa
you can find the popular Amphawa Floating Market. The best way to visit the floating market is by hiring a one-day tour from Bangkok. They will take there in the morning and you will be back to Bangkok around 5 pm. Be sure you don't miss the boat ride along the Mae Klong River at night time to see the fireflies flying along the riverside.
You can specify an alternative web page address pointing to a different post. Normally the post should point to the page where the WishWidget is inserted but you might want to change it. If you don't want to set an alternative post address you don't have to specify the
post attribute as it is inferred automatically.
The post URL can be shown in the Trip Planner as a reference for the reader.
On some occasions you may want to point to a different post in your blog, i.e. when blogging about a city and you insert a country WishWidget and you have a specific post about the country. In that case you can set the country post address by using this attribute.
The following code in a post about Bangkok,
<h1> Bangkok <WishWidget country="TH" city="Bangkok"> </WishWidget> <!-- Above you don't need to specify the post attribute as the post URL is this page address --> </h1> <p> Bangkok is the capital city of Thailand <WishWidget country="TH" post="/travel/my-posts/countries/thailand"> </WishWidget>. <!-- Here you set the post attribute because there is a more specific post about Thailand as a country in /my-post/countries/thailand --> </p>
Bangkok is the capital city of Thailand
Featured image URL. This picture, if set, will be used in the Trip Planner to illustrate the related destination.
You can use it for a country, a city or an activity WishWidget. When used in a Country WishWidget1, the picture will be used to decorate the related country entry in the Trip Planner. If used in a City WishWidget2, the picture will illustrate the corresponding city entry and when used with an Activity WishWidget3, the picture will adorn the associated entry in the Trip Planner.
Shows a button with the
label attribute text
label is set to an arbitrary text string, the WishWidget takes the form of a button and shows the text in the
label attribute. If
label is set to
true, the text shown in the button is the localized Wish to go string. When set to
false (default) or not set it doesn't show any text nor have the shape of a button.
Writing the following html code:
<p> The following widget will not show any text <WishWidget country="TH"> </WishWidget> </p> <p> Here it shows the standard text <WishWidget country="TH" label="true"> </WishWidget> </p> <p> And this will show Add to Wishlist <WishWidget country="TH" label="Add to Wishlist"> </WishWidget> </p>
The following widget will not show any text
Here it shows the standard text
And this will show Add to Wishlist
The TravelPlanWidget Tag
The Travel Plan Widget is used to place the Trip Planner in your page. You only need to insert the following HTML code where you want the Trip Planner to appear in your blog page.
You can place the TravelPlanWidget tag in any place of your webpage but due to the space needed to show the reader's trip plan, it is better to place it in a dedicated page or in a sidebar.
The TravelPlanWidget has only one attribute. It is used to set the customer's id you received upon registration. To set your customer's id use the following code:
<TravelPlanWidget customer-id="xxxx-xxx-xxx-xxx" > </TravelPlanWidget>
Change the xxxx-xxx-xxx-xxx string by your own customer's id.
The WishCounterWidget Tag
This tag will show a heart icon with a wish counter in the top right corner of the heart. The Trip Planner will appear a modal window when the user clicks on it. If you don't want a modal window, you can set the page URL where you have the Travel Plan Widget using the
This widget is to be used in the bottom of your blog pages or as a menu item in the way it is used as a shopping chart in marketplaces.
URL where you have the Travel Plan Widget. When the user clicks on the WishCounterWidget, it will be sent to the URL specified in this attribute. If you leave this attribute empty or it is not declared, when the user clicks on the widget a modal window with the Travel Plan will appear. We recommend not setting this attribute as it will improve the user experience.
The ShareTripWidget Tag
The ShareTripWidget copies an stored trip from a user, typically the blogger user to a readers Travel Planner. This is a nice way to share trips with readers, so they don't have to do it by themself.
This widget shows a big button with information about the trip to share. When the reader clicks the ShareTripWidget button, the associated trip is copied to the reader's personal Travel Planner and opens it in a modal dialog.
The following code:
<ShareTripWidget user-id="xxxx-xxx-xxx-xxx" trip-name="Wish To Go Trip to Thailand" icon-url="https://static-images/blogger.png" > </ShareTripWidget>
This is the
user-id of the user owning the trip to share. Normally, it is the blogger's
user-id, but can be any existing user.
The stored trip name in the
user-id Travel Planner.
The source trip owner avatar. It's an optional attribute.
Text to display in the main area of the ShareTripWidget. If not set, a standard message is displayed. Contain details of the itinerary and a call to action to invite the reader to click on it.
Smaller text displayed in the ShareTripWidget. If not set, a standard message is displayed. Use it to engage with your readers telling that it is your personal itinerary.
- A Country WishWidget is a WishWidget with the
countryattribute set but not
activityattributes. It is used to denote that the WishWidget describes a country as a whole.↩
- A City WishWidget is a WishWidget with the
activityattributes set but not the
activityattribute. It is used to denote that the WishWidget describes a city.↩
- An Activity WishWidget is a WishWidget with the
activityattributes set. It is used to denote that the WishWidget describes an activity that can be done in the related city.↩