As we continue to receive a great amount of feedback and requests from users of the Layar Creator, we are excited today to introduce a new, highly-requested feature.

When we first released the HTML Widget feature, we made it possible to add a frame of HTML to Interactive Print, opening the door to all kinds of experiences. One of the most popular and most relevant uses of the widget was to create an interactive poll for people to vote in, but this required building the tool in HTML.

Today, we’ve added an easy, DIY poll widget to the Layar Creator, making it simple to add a basic poll to your campaign so your audience can cast their vote! With the new “Vote In a Poll” button, you can upload a few images which serve as buttons for users to tap to vote.

As seen in the video above, the new poll widget is great for giving voice to your audience to vote for a particular style or color of an item. They can see the results of the poll in real time to learn what other people think as well. You can instantly see the results of your poll by going to the “Stats” tab in your campaign.

The feature is available to everyone until July 1st, at which point it will become a Premium only feature, so try it out today!

^{Welcome to HTML Week here on the Layar blog where we’ll be taking a look at some of the great ways you can bring print alive with HTML widgets in the Layar Creator. We’ll provide a closer look at how each example was built, and provide you with some resources to add similar techniques to your own projects. Each example we feature can be found in the completely refreshed and updated LAYARED Magazine! Get yours today and see how interactive print is creating more engaging reader experiences!}

It’s the final day of HTML Week here on the Layar blog, and we saved a really great example for last!

In the very middle of LAYARED Magazine – pages 16 and 17 – a two page spread advertises the Layar Creator, including the quick steps to making interactive print. The illustrated spread provides a great overview of what it takes to use the Layar Creator, but scanning the page takes this to a whole new level.

Using some of the same basic HTML tricks we’ve been featuring throughout HTML Week, we created an engaging, animated walkthrough of using the Creator. Readers are directed to tap through the various steps of uploading pages, adding augments and publishing a campaign. Just follow along and tap the “Tap Here” buttons and you’ll be a pro at the Layar Creator in no time.

It’s a great example of how the HTML Widget in the Creator can be used to provide an immersive experience for readers. Here’s more about this widget:

• Uses similar jQuery techniques from other HTML Week examples.
• Uses the FlexSlider plugin for the slideshow at the beginning.
• The steps are a series of screenshots from the Layar Creator.
• Includes a “View in Fullscreen” button so users can follow the tutorial without needing to hold their device over the page for an extended period of time.

Again, this example seems more complex than it actually is. Using the FlexSlider plugin mentioned above, we created a few basic slides to introduce the walkthrough widget. When a user taps on a step to enter the tutorial, the slider fades away.

The green “Tap Here” buttons are very simple as well. It’s essentially three different elements that fade in and out on top of one another to produce a nice effect that encourages the user to tap the icon. Using timing and opacity options, the inner circle first fades in, followed by the outer rings. Then the inner circle fades out leaving the rings to guide the user.

The rest of the widget is simply fading from one screenshot to another, triggered by the user tapping the icons. It’s a very simple implementation but in this case it goes a long way toward educating readers of LAYARED Magazine about how the Layar Creator actually works.

After running through the 6 steps, readers are then familiar with how to create interactive print and are ready to hit the ground running when they use the Creator on the Web for the first time. This same widget could be used for any of a variety of purposes, from an app tutorial to instructions on constructing your new furniture. As with all HTML widgets, the possibilities are only limited by your imagination.

And that wraps it up for this example and HTML Week. Follow the links above to review all of our widget breakdowns from this week!

^{Welcome to HTML Week here on the Layar blog where we’ll be taking a look at some of the great ways you can bring print alive with HTML widgets in the Layar Creator. We’ll provide a closer look at how each example was built, and provide you with some resources to add similar techniques to your own projects. Each example we feature can be found in the completely refreshed and updated LAYARED Magazine! Get yours today and see how interactive print is creating more engaging reader experiences!}

Today for HTML Week we are taking a look at one of our several ecommerce solutions found in LAYARED Magazine. Print is often advertising a product being sold, and now readers can buy items right off the page with interactive print!

We have multiple mobile shopping examples in LAYARED Magazine. On page 18, scanning the advertisement for a men’s briefcase brings up photos and information on similar products, and on page 22, you can interact with detailed information about the products found in the photo spread. But be sure to check out page 20 where things get really interesting!

Simple Shopping Cart

Everyone these days is familiar with an online shopping, and some may have even purchased an item from the mobile device via the web. In this example, we offer a way to bring the shopping cart experience in augmented reality with interactive print.

Essentially this example is a proof of concept, showing how the Layar App can handle “cookies” of information which can be translated into an actual shopping cart experience. On page 20 of LAYARED Magazine, you’ll see an ad for several products, including a wristwatch. Scanning with Layar displays two widgets – one for picking a color and adding the item to a cart, and one for viewing your cart info and proceeding to checkout.

When a user taps on one of the three color squares, the color of the watch in the magazine changes, much like in a traditional web-based shopping experience. This is accomplished with some simple jQuery code. There are many ways to accomplish this effect, but we chose the simplest route.

First we stacked the three different images of the watch on top of each other, but set two to be “hidden.” When a user taps on one of the colored swatches, the corresponding watch image is set from “hidden” to “visible,” and the watch which was previously “visible” is then made “hidden.” It’s a really simple, quick and easy way to showcase different colors of products with interactive print.

Tapping “Add to Cart” then stores the chosen product as a “cookie.” The top widget tracks the changes on this “cookie” and changes the number of items whenever a product is added to the cart. Readers can then tap the link to proceed to checkout with the shopping cart they have filled. In our case, it’s a dummy shopping cart so no product can actually be purchased, but it shows how a shopping cart experience can easily be implemented.

Layar behaves like a normal web browser, which means you can use normal HTML tactics to display different AR content based on user input, providing for a more personalized experience for readers. Here’s more about how this widget works:

• Uses jQuery and “cookies” to save information.
• Multiple “Add to Cart” buttons and widgets could be used.
• More features and options could be added: color, quantity, size, design, etc.
• The ultimate version of the shopping cart widget would allow one widget to be used throughout an entire campaign.

More: Photo Grid & Animated Ad

Of course, the shopping cart isn’t the only ecommerce example found in LAYARED Magazine. Check out page 18 for a dynamic photo grid and page 22 for an animated advertisement. Here’s a little more on how we made these great interactive items.

For the photo grid, we wanted to showcase some similar products to the one in the photo. Using similar jQuery tricks we mentioned yesterday with the Lonely Planet map, we created some slick animation effects and slideshows to provide more information about each product. Alternatively, you could add “Buy now!” buttons for each product and connect it with a shopping cart widget.

The animated ad on page 22 was created to show off the possibilities of simple animation with jQuery. Tapping the button which appears on the page animates more buttons which hover over the various products. Tapping these buttons triggers slick animated windows that provide the reader with added information about the product.

Like a lot of HTML examples, it seems complicated but is actually relatively simple to create using the jQuery tactics we’ve gone over so far in HTML Week.

That’s it for today’s examples! Be sure to keep it here tomorrow as well as we wrap up HTML Week with our final widget example!

This week is a special one here at Layar – it’s HTML Week! Over the next few days you’ll be introduced to the world of possibilities created by our recently released HTML widget for the Layar Creator.

The HTML widget lets you embed a frame of HTML on top of print content which anyone can then view by scanning the page with Layar. It opens up nearly endless possibilities for interactive print, and we’re going to show you just what you can do and even how to do it.

Each day for the rest of the week, we’ll be posting some great examples of how the HTML widget can help bring print to life in a whole new way. We’ll even share the plugins and tools we used to make it possible.

To kick things off, we’re introducing an entirely revamped LAYARED Magazine, which has been loaded with great HTML widget examples. It’s the same print magazine as before (with some updated stats) so if you have your own copy, just scan it again today to see all the new content. Don’t have your own copy? You can order one, download a PDF or view it online here!

Here’s a look at some of the examples from the new LAYARED that we’ll be going into more detail on this week.

• Full Mobile E-Commerce Experience
  Now you can provide a complete mobile shopping experience directly from the pages of a magazine! You can switch through various product options, add items to your cart and proceed to checkout.
• Fun Puzzles & Games
  Adding a bit of entertainment to your print is easier than ever, and it’s way better than a simple crossword or sudoku. We show a few quick examples of interactive games that can be easily built in the Creator.
• Interactive Lonely Planet Map
  This clickable interactive map shows you hotel and flight information for some of Lonely Planet’s hottest locations around the world. It’s an excellent example of how you can provide more info to readers in an engaging way.
• Layar Creator Step-by-Step Guide
  Our infographic spread showing the steps to using the Creator to launch a campaign comes alive with interactivity, taking you on a guided, click-by-click tour through each step.

Order your copy of LAYARED Magazine here, and stay tuned here on the blog this week to learn all about the power of HTML in interactive print!

Last week we introduced some brand new, powerful additions to the Layar Creator - the Twitter Feed, Image Carousel and HTML widgets. Twitter and image slideshows are pretty straightforward, but the HTML widget is full of possibilities.

In order to give you some inspiration for how to make the most of this powerful new tool, we’ve compiled some examples of how you might use dynamic HTML content with interactive print. 

Flip through the photos below to see some of most promising use cases for the HTML widget.

Of course these aren’t the only examples of how HTML can be used in the Creator - the possibilities are nearly endless. Including:

• Get info with forms - Let readers subscribe to your magazine right from its pages, or let them send feedback about specific content, like mailing the author of an article, with a simple contact form.
• Cultivate event info - Instead of just telling attendees at your event what’s happening and when, provide live information, like live Tweets or breaking news stories at a big conference!

There are lots of other great examples for how to use HTML, but we want to see you come up with them and place them on your print. It’s really easy to do - just build it in HTML, host the file somewhere, add the link in the Layar Creator and define the frame size.

Check out the end of this video to see how to use the HTML widget in the Creator.