Home » Our Applications » Integration Documentation

Digital Visitor Applications Integration

Welcome to the Digital Visitor applications guide, created specifically for developers.

Here, you will find all the important information you need to understand how to effortlessly integrate our series of award-winning applications into your current website, to;

• Increase traffic to your website, both organically and from social networks.

• Increase conversions

• Reduce your customer acquisition cost.

Here at Digital Visitor, we like to keep things simple, so we have created a step by step guide to ensure that the integration of our social media applications is as hassle-free as possible. Integration is as simple as cut and paste, so you should have your application up and running within minutes. Should you have any questions, the guide below will provide you with all the information required.

NEWS FLASH...NEWS FLASH...NEWS FLASH

Digital Visitor are excited to be able to announce the launch of the fourth generation of our award winning social media applications.

We have worked hard to improve the new generation of our applications including new features, improved user experience and quicker and easier integration into websites, good news for all our fellow developers out there!

The new applications are currently being rolled out and the documentation will be continually updated with new features and functions.

Simple Integration:

You should have received from Digital Visitor your API key with this small snippet of code seen below. This code will have enabled predefined settings and a unique API key for your content.

The snipped of code provided to you is to be added to the <head> of the page where you want the application to appear.

Integration Code:

var DVapp = {

api_key : '###Your Unique API KEY ###',

relation : '### YOUR UNIQUE PRODUCT REF ###',

target : '### ID OF THE PLACEHOLDER ###'

};

</script>

There are 2 items that need to be defined by you on each page where our application wil sit.

Relation: This allows you to uniquely identify the content which will be receiving content. This is essentially ‘what’ the post will be about. There is no restrictions on what can be used for this and this can be defined as either names, numbers, product Id’s, etc. Ideally this relation will have no spaces or characters.

Target: This defines ‘where’ the app will sit on your page. Our Application will append and re-size itself based on the target ID defined. By target ID we mean a page element with a unique ID. Ideally this ID will have no spaces or odd characters.

*** TIP: Ensure there are ' ' around the specified item and a comma at the end of each variable (except the last one in the list) ***

Customisation of your Applications

There are a number of items within your application which you can control and change. These include:

- The Placement of the Dashboard/Login Widget

- Text Used on tabs and Buttons

- Star Size and Colour

- Floating Dashboard

Scrolling Dashboard:

The dashboard by default will be fixed in place at the top of the application. If however, you would like the dashboard to float down the page as a user scrolls posts, then simply add the variable below. This feature is useful to encourage users to share their own content as they will always have the ‘Post’ call to action visible.

scrollControl: true

Text Used on Tabs and Buttons

Default text is Reviews and Discussions but this text can be changed by

reviewTabTxt : '##ENTER TEXT##',

reviewButtonTxt : '##ENTER TEXT##',

discussTabTxt : '##ENTER TEXT##',

discussButtonTxt : '##ENTER TEXT##'

Star Colour and Size

The default size and colour is Large, Orange. To change this, simply add the code below into the application set-up section.

starSize : 'size',

starColor : 'colour'

** Star colour choices are red, blue, darkblue, green, darkgreen, yellow, violet, orange, pink, brown, black, white, silver, and gold

** Star Size choices are small, medium, large

Example Integration Code with Customisation

var DVapp = {

api_key : 'a449595djrkt60906070rf0444',

relation : 'Product1',

target : 'ReviewTab1',

position: 'topleft',

scrollControl: true,

reviewTabTxt : 'Share Your Review',

reviewButtonTxt : 'I want to Post a Revew',

discussTabTxt : 'Our Discussions',

discussButtonTxt : 'I want to start a Discussion',

starSize : 'medium',

starColor : 'green'

};

</script>

*** TIP: Ensure there are ' ' around the specified item and a comma at the end of each variable (except the last one) ***

Styling the Application (CSS)

Within your admin section under 'CLIENT DETAILS' we provide you the CSS file to change the colours and styling of your application. Any changes saved here will be reflected in your application. If you do not have the development resources to make CSS changes Digital Visitor can facilitate this for you.

Seperating the Reviews & Discussions Applicaions

As standard you can either have Reviews, Discussions as seperate applicaitons depending on your needs. If you only have one of these applicaitons enabled then please ignore this section.

If however you have both the Reviews and Discussions enabled then by default these will appear side by side in tab format where the appliction is integrated.

If you want to only display one of these tabs on a given page, then this is acheived in the following way:

To hide the reviews and only have Discssions add:

hide_reviews: true

To hide discussions and only have Reviews add:

hide_discussions: true

Example Code: Hiding the Discussions Application

var DVapp = {

api_key : '3a50fc16-d89d-11e0-a26b-4040b2058987',

relation : '0123456789',

position : 'topright',

target : 'content',

starSize : 'large',

starColor : 'pink',

hide_discussions: true

};

</script>

defer="defer"></script>

Average Rating Mini Widget

The Average Rating Mini widget allows you to place the 'average rating' of a product anywhere on your website. This is primarily seen next to Product Names and in listing pages to show the product has ratings against it.

The code works in the same method as the main application and in all instances where the Average Rating Mini Widget is to be displayed; there are 3 items which need to be defined by you. TARGETID, PRODUCT ID, API Key

Average Rating Mini Widget Code:

defer="defer"></script>

</span>

The TARGETID, API KEY and PRODUCTID are mandatory fields and need to be added by you.
The script will call out to our servers with the APIKEY and PRODUCTID to get the rating against that product. The TAREGTID should be a unique ID that exists on the calling page, into which the rating will be displayed.
This target can be any element (div, p, span etc..) but must contain NO OTHER MARKUP OR CONTENT as it will get overwritten by the stars.
The TARGET can contain the calling script. Alternatively, the script calls can be placed anywhere in your code.

Modifying the Average Ratings Widget

If you want to display the text under the stars, add &showtext=true to the end. Omit this if no text is required and you just want to display the stars.

The 'defer="defer" part of the script means this widget will run only after the page has finished loading, but this is not mandatory.

Changing Star Colour and Size

The stars of the Average Ratings Widget can be displayed in 3 different sizes and 14 different colours. All you need to do is add two extra parameters to the star widget call

To change the colour of the stars you need to add..

&color= and any one of the following:

red, blue, darkblue, green, darkgreen, yellow, violet, orange, pink, brown, black, white, silver, gold to pick a colour.

To change the size of the stars you need to add...

&size= and any one of the following

small, medium, large

** Combining the two will show the stars of that selected size and selected colour.

**If neither of these are specified, the widget defaults to large, orange, as we see now.

Example: To have ‘small, gold stars’ the code would be:

defer="defer"></script>

SEO

We can deliver your content directly to any page in HTML, XML or JSON format and ensure your reviews are indexing agianst your products. There are numberous approaches we can take with this depending on your requirements.

Please contact your account manager for the appropriate code and method for your applicaiton.

If you have any further questions or just want to get in touch we recommend you contact our support staff.

Digital Visitor Applications Integration

Follow us