Monday, September 10, 2012

Make Your Own Marketing Widgets!

How LAB-AIDS is using the new widgets.
Tizra now offers a Widget viewing mode that lets you embed your content in just about any standard web page just by inserting a little blob of HTML code.  It's great for letting users "leaf through" samples of your content without interrupting what they're doing...whether that's perusing your online book catalog, reading a review, or as you'll see below, enjoying a fascinating blog post like this!  It enables you to disseminate promotional samples widely via viral or conventional marketing campaigns, and to make the online shopping and buying experience as seamless and integrated as possible.

For example, say you were a well-known Tizra customer like Gibbs Smith Education. You could give bloggers a simple snippet of code that would let them show their readers a thumbnail-sized sample of one of your beautiful books like this...

To let them see it at full size, you could put a little link like this underneath.

All that's needed to embed the above sample is a little blob of code like this...
<iframe src="http://s45273646-sample.tizrapublisher.com/Utah_Our_Home_Student_Edition/3?zoomFactor=0.255" style="width:240px;height:326px;background-color:#fff;"></iframe>
The web monkeys among you will immediately recognize it as plain old HTML that'll work just about anywhere.  This means it's easy for anyone with minimal web skills to spread the word about your content.

It also means web designers can customize the widgets without learning anything new.  With a few tweaks, samples can be made bigger, smaller, given decorative borders, or otherwise tailored to fit their surroundings.  Say you wanted to distribute a bigger sample, like this from Goodheart-Willcox, and frame it in orange...



Cooking Up Your Own Widgets

To create one of these blobs of code, you start with a pair of standard iframe tags, like this...
<iframe></iframe>
To indicate which content you want included in the sample, you use a special version of the Tizra URL for that content (to open up access to the content, you'll need admin privileges on a Tizra account and knowledge of the basic access control tools).  The URL is similar to the ones used to preview content in the private staging area of a Tizra site, but with a slight twist.  If the staging variant looked like this...
http://s45273646-preview.tizrapublisher.com/Utah_Our_Home_Student_Edition/3
...the version to use in your widget would look like this...
http://s45273646-sample.tizrapublisher.com/Utah_Our_Home_Student_Edition/3
...with the only difference being that "sample" is used in place of "preview."

Once you have the URL, you stick it into the iframe markup like this...
<iframe src="http://s45273646-sample.tizrapublisher.com/Utah_Our_Home_Student_Edition/3"></iframe>
From here, it's all about tweaking the cosmetics.  First you'll probably want to set the size of the iframe (essentially the window inside which your content will be displayed).  You can do that through standard HTML.  For example, you'd set it to 240 pixels wide by 326 pixels wide like this...
<iframe src="http://s45273646-sample.tizrapublisher.com/Utah_Our_Home_Student_Edition/3" style="width: 240pxheight: 326px;"></iframe>
You can change the size of the page images that appear inside the iframe by adding a zoom factor to the end of the URL like this...

<iframe src="http://s45273646-sample.tizrapublisher.com/Utah_Our_Home_Student_Edition/3?zoomFactor=0.255" style="width: 240px; height: 326px;"></iframe>
Increment the number up for bigger, down for smaller.  

Then you can decorate to your heart's content, say by adding a white background to bleed out to the edge of the iframe, and a nice crisp black border...

<iframe src="http://s45273646-sample.tizrapublisher.com/Utah_Our_Home_Student_Edition/3?zoomFactor=0.255" style="width: 240px; height: 326px; background-color: white; border: 1px solid black;"></iframe>


No comments: