Virtual Samples On Demand

At the bottom of your page (before the </body> tag) include the Virtualsample plugin (see Bundler) and run this code.

<img class="technologovs" src="/products/mug300.jpg" title="SomeProdRef" />
<script>
	$('.technologovs').technologovs({
		vsod:{"apiKey": "A1B2C3@EODTECHNOLOGO"}
	});
</script>

Without any options, VSOD will insert a link after the image and use the image title (or page title if no image title exists) as the product reference.

The following options can be applied to the jQuery initialisation call...

$('.technologovs').technologovs({
	vsod:{
		"apiKey": "A1B2C3@EODTECHNOLOGO", // apiKey needs to be here regardless
		"triggerText": "Create a Virtual Sample",
		"triggerClass": "mybuttonclass",
	},
});

...or, if each element should behave differently, options applied to an element overwrite those given in the initialisation.

<img class="technologovs" data-technologovsod='{"triggerText": "Create a Virtual Sample"}' src="/products/mug300.jpg" title="SomeProdRef" />

productRef

The product reference to send to Technologo.

Type: string

Default: If not given, it is picked up from the image title attribute, the first h1 element or the page title, whichever exists first in that order.

external

Open in a new window/tab (see notes).

Type: boolean

Default: true

trigger

Where to place the trigger, or which element to use as the trigger.

Type: string

Options: "before", "after", "self" or a jQuery selector, e.g. "#mytrigger"

Default: "after"

triggerText

The text shown on the trigger.

Type: string

Default: "Create a Virtual Sample"

triggerClass

The class names applied to the trigger.

Type: string

Default: "ccui-btn ccui-btn-small no-left-margin no-right-margin"

The trigger is the link or other element that triggers the VSOD window to open.

Tell VSOD to use an existing element as the trigger to open the On Demand service.

Create a Virtual Sample

<img class="technologovs" data-technologovsod='{"trigger":"#mytrigger"}' src="/products/mug300.jpg" title="SomeProdRef" />
<button id="mytrigger">Create a Virtual Sample</button>

Add a full image URL as src to the data attribute to enable a button. Define the product reference in the data as productRef.

Note: when using a button the option triggerText sets the title not the text.

<button class="technologovs" data-technologovsod='{"productRef":"MyProdRef", "src":"http://code.customerfocus.com//images/examples/products/mug300.jpg"}'>Create a Virtual Sample</button>

VSOD sets the CSS class of the button to what is in the options given to the technologovs plugin on execution. The default is to use Code Customerfocus UI class names. This feature may be prevented by setting the value of triggerClass to empty.

<button class="technologovs" data-technologovsod='{"triggerClass":"", "productRef":"MyProdRef", "src":"http://code.customerfocus.com//images/examples/products/mug300.jpg"}'>Create a Virtual Sample</button>

Note: when using a button the option triggerText sets the title not the text.

Links to VSOD can be created and outputted without jQuery or this plugin.

To create a link to VSOD you need to concatenate several things:

1. Your public Technologo API key, which uses the key email in the link,

   https://www.technologo.com/vSample?email=A1B2C3@EODTECHNOLOGO

2. Your product reference which uses the key sku,

   &sku=MyProductRef

3. The full image URL imagelocation_0 which should ideally be escaped/urlencoded,

   &imagelocation_0=http%3A%2F%2Fyoursite.com%2Fimages%2Fproduct123.jpg

4. And the default options must follow.

   &imageCount=1&orientation=square&whiteout=true&removelogo=true

<a href="https://www.technologo.com/vSample?email=A1B2C3@EODTECHNOLOGO&sku=MyProductRef&imagelocation_0=http%3A%2F%2Fyoursite.com%2Fimages%2Fproduct123.jpg&imageCount=1&orientation=square&whiteout=true&removelogo=true">Create a Virtual Sample</a>

Images

• Single product shots work better than group shots
• Images are best cropped tightly
• Maximum display size is 600x600 pixels, keep images around or below this

Accepted formats

• JPG/JPEG Almost all jpgs can be used but CMYK jpgs may display improperly
• GIF If animated, only the first frame will be used
• PNG Transparency will be replaced with white
• BMP Bitmap images from all platforms are accepted

Opening a new window/tab

There is nothing stopping you from opening in a new window using target="_blank" or rel="external", however modern standards dictate that it's bad practice for several reasons:

• Removes the back button: If the user didn’t realise that a new window had loaded they might be clicking the back button unsuccessfully.
• Confuses the user: The window might appear in front of the original window, meaning the user might not know where the other screen has gone to.
• Removes control from the user: Users have the ability to control how to open new links, unless you force it to open in a new window, removing the user’s control.

VSOD is an application on its own, so clicks made within it should not become part of the user's navigation history. The best option, therefore, is to pop a modal window and dispose of it when the application has served its purpose. The modal window should also not fill the whole window so that it's obvious to the user that the original page is still there beneath it.

However, this code is still bleeding edge and we haven't addressed the cross-domain policy issue for this particular service yet.