Widget

By signing up with us, you gain access to our widget which can be placed on your website to display pictures of different attractions in Europe. This may be useful for travel writers, bloggers, newspapers, or web developers looking to enhance their visitor's experience.

The widget is a third party widget which means that the thumb pictures are sent directly from Go By Seeing and placed on your website. All you are required to do is add 2 lines of code to your website. No coding experience is needed, only access to your website's files and we've provided a guide below to help you place the code exactly where you want it. There's also additional info on troubleshooting if the widget isn't displaying or not rendering correctly.

Examples

The widget has three different formats and changing the format is pretty easy. You only have to change the "data-widget-style" to the corresponding number. Specifics on changing the format are given under "Steps".

Format 1:

Format 2:

Format 3:

Click the link below for an example on a test webpage

Additional Info

All pictures loaded via the widget to your website, are those that are displayed on Go By Seeing. This means that they are taken from 2 different sources, Go By Seeing photographers and Users. By uploading their pictures, users grant Go By Seeing the right to display their pictures to third party websites via the widget.

Each time somebody visits your web page with the widget code included, a request is made to our servers for pictures relating to the "Place to See" that you've indicated in your code with a link that when clicked redirects the visitor to our webpage. Our servers send a response back with 4-8 random pictures (depending on the format you've chosen) corresponding to that place. The pictures are chosen at random and cannot be changed.

Plans are in development to offer widget users more options and the ability to customize their widget. These may include the choice of which pictures they want to be displayed, removal of the Go By Seeing logo (header and footer), and the diplay of the pictures via a "pop-up" or "fancybox" directly on the user's website.

Steps

1. Sign up/Get Widget ID

First, you will have to create a login with us which can be done by clicking the "Sign Up" button in the header. A new profile (under "My Profile" tab) will be created where you'll be provided a Widget ID. This ID is required to display the widget on your website.

2. Use Widget Utility to get code

In your new profile, you'll find the Widget Utility which generates the exact code you'll need to add to your website. It customizes the code according to several selections including, city, place, style/format.

3. Copy code into your website

The code pumped out by the Widget Utility should be copied and pasted exactly where you'd like to see the widget. You will need access to your online files via your web host but this should not be a problem if you are developer or have basic HTML know-how.

If you are using a blog site like Blogger, you should switch on the HTML option when typing your posts. If you're using a CMS like Wordpress, you may have to add a widget that allows you to put in HTML and Javascript directly into your posts.

Below is a short example of where you might place the widget in your code

<!DOCTYPE html>
<html>
<body>
<h1>My Travel Blog</h1>
<p>This is my travel blog. I write about my travels all around the world and I heart it</p>
<p>I visited the Arc de Triomphe today and here are some pictures you can take a gander at.</p>
<script type="text/javascript" src="http://www.gobyseeing.com/widgetfiles/widget.js"></script>
<div class="gobyseeing-love" data-widget-id="150a538cdb8501" data-widget-place="1" data-widget-style="1"></div>
</body>
</html>

Troubleshooting

The widget isn't showing

This can be the result of a few things so it's a good idea to make a checklist of everything you need to successfully implement the widget on your website. When copying and pasting the 2 lines of code on your website, make sure that they include two things

1. The javascript file

2. The "gobyseeing-love" div element.

//This is the Javascript file and needs only to be included once on the webpage.
<script type="text/javascript" src="http://www.gobyseeing.com/widgetfiles/widget.js"></script>
//The division or 'div' is the container that will hold all the pictures. Additionally, it holds all our option parameters.
<div class="gobyseeing-love" data-widget-id="150a538cdb8501" data-widget-place="1" data-widget-style="1"></div>

If you have multiple widgets on one page, you do not need to include the javascript twice, however, you do need to copy and paste a second div element.

Each div element needs three things:

1. The Widget ID

2. The widget-place(refers to the numeric code assigned to a specific place)

3. The widget-style(refers to the style or format as explained under "Examples")

<div class="gobyseeing-love"
data-widget-id="150a538cdb8501" //The WIDGET ID which identifies you.
data-widget-place="1" //The PLACE you want pictures from. Go to individual pages for place code.
data-widget-style="1" //The STYLE of the widget. There are 3 styles to choose from.
></div>

The widget looks weird...not how it's supposed to look.

Since your webpage already has it's own CSS styles which govern how your webpage should look, occassionally these styles may interfere with the CSS styles from the widget. A cleanslate CSS is applied to the widget to avoid interference from your webpage but sometimes intereference can still occur. It's best to review your CSS styles to determine why the widget isn't rendering correctly. It may be because you applied a default style to all divs, anchors, etc.

A common problem occurs when all the elements within your parent div have a CSS property of "float:left". Since the "gobyseeing-love" div is not assigned this value, a workaround for this problem is wrapping it with another div and setting it to "float:left". An example is provided below.

<script type="text/javascript" src="http://www.gobyseeing.com/widgetfiles/widget.js"></script>
<div style="float:left;">
<div class="gobyseeing-love" data-widget-id="150a538cdb8501" data-widget-place="1" data-widget-style="1"></div>
</div>

If the problem persists, feel very free to contact us with your problem because we'd like to solve any problems that result from the widget.

The widget seems to be flashing with different photos.

Flashing refers to the possible event that one set of photos seems to load and then another set loads directly afterwards on the same "gobyseeing-love" class. This may be a result of your webpage using ajax to dynamically load content onto your main page which already has jQuery loaded.

The widget dynamically detects whether you have jQuery installed on your page. If it detects that jQuery has not been loaded, it will load the library along with the widget code. If it does detect jQuery, it will not load it (unless the version is outdated). If that page is then loaded via ajax onto your main page which already has jQuery loaded, the widget code will load again causing the flash.

Note: This flash should not occur in webpages which are not loaded with ajax.

Multiple widgets on same page.

Sometimes you may want to have more than one widget instance on one webpage(not website as a whole). There should be no problems doing so as long as you have followed the steps correctly and included all required data inputs. However, you may find there is an issue if you try to put one widget one directly after another as noted below.

<script type="text/javascript" src="http://www.gobyseeing.com/widgetfiles/widget.js"></script>
<div class="gobyseeing-love" data-widget-id="150a538cdb8501" data-widget-place="1" data-widget-style="1"></div>
<div class="gobyseeing-love" data-widget-id="150a538cdb8501" data-widget-place="2" data-widget-style="1"></div>

The preferred work around for this is to wrap each div with a class of "gobyseeing-love" with another div and assign whatever styles you like to it. This will avoid the possible event that the widget mistakenly assigns two sets of pictures to the same "gobyseeing-love" class.

<script type="text/javascript" src="http://www.gobyseeing.com/widgetfiles/widget.js"></script>
<div style="margin-bottom:15px;">
<div class="gobyseeing-love" data-widget-id="150a538cdb8501" data-widget-place="1" data-widget-style="1"></div>
</div>
<div style="margin-bottom:15px;">
<div class="gobyseeing-love" data-widget-id="150a538cdb8501" data-widget-place="2" data-widget-style="1"></div>
</div>

Widget Policy

By using the widget, you are agreeing to our Widget Policy. Click here to read.