Plugin Documentation

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.

In order the widgets to work, you should load the JavaScript code in your page.

Loading the JavaScript Code
WishWidget Tag Reference
Attributes: country, city, activity, post, picture, label
TravelPlanWidget Tag Reference
WishCounterWidget Tag Reference
ShareTripWidget Tag Reference
Attributes: user-id, trip-name, icon-url, label, sub-label

Loading the JavaScript Code

The JavaScript code is loaded by inserting this

<script src="https://cdn.wish-to-go.com/wish-to-go.main.js"></script>

tag at the bottom of your HTML document but still inside the <body> tag.

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>

The highlighted line is the one loading the JavaScript code. Note that it is inserted just before the </body> closing tag.

Troubleshooting

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.

The Wish to go JavaScript code exposes a global function in the window namespace called 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 in any part of a blog post. You only have to insert the following html code snippet where you want the heart to appear.

<WishWidget country="Spain"></WishWidget>

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
Chatuchak

WishWidget attributes

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
city
activity
post
picture
label

`country`

Country ISO code (recommended) or country name.

This is the only mandatory attribute. You should use the country attribute alone to set a Country WishWidget¹ which indicates that the wish refers to a country as a whole.

The country attribute, when used with city or activity attributes, helps to identify in which country is a city or an activity is carried out.

<WishWidget country="TH"></WishWidget>

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`

City name

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

`activity`

Activity name

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>

will produce

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.

`post`

Post URL

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>

will show

Bangkok
Bangkok is the capital city of Thailand .

`picture`

Picture URL

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 WishWidget¹, the picture will be used to decorate the related country entry in the Trip Planner. If used in a City WishWidget², the picture will illustrate the corresponding city entry and when used with an Activity WishWidget³, the picture will adorn the associated entry in the Trip Planner.

`label`

Shows a button with the label attribute text

When 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>

will show

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.

	<TravelPlanWidget></TravelPlanWidget>

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.

TravelPlanWidget attributes

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 trip-planner attribute.

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.

WishCounterWidget attributes

`trip-planner`

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>

will produce

ShareTripWidget attributes

`user-id`

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.

`trip-name`

The stored trip name in the user-id Travel Planner.

`icon-url`

The source trip owner avatar. It's an optional attribute.

`label`

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.

`sub-label`

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 country attribute set but not city and activity attributes. It is used to denote that the WishWidget describes a country as a whole.↩
A City WishWidget is a WishWidget with the country and activity attributes set but not the activity attribute. It is used to denote that the WishWidget describes a city.↩
An Activity WishWidget is a WishWidget with the country, city and activity attributes set. It is used to denote that the WishWidget describes an activity that can be done in the related city.↩