Knowledge Base/Layar-Creator/Getting Started

Layar Creator: Getting Started Guide

xuan
posted this on April 04, 2012 10:59

In this guide, we explain what each element of the Creator means and walk you through the steps of creating a campaign. Please read it carefully before starting with your own campaign. You can also refer to it if you have any questions while using the Creator.

Campaign Meta Data

 

Screen_Shot_2014-02-18_at_11.25.17.png

Campaign Name:

The Campaign name  is a title you assign in order to organize your campaigns and statistics in the downloadable .CSV files. We suggest using the same naming convention which you use in your own internal work, but be sure that it is unique. For example, with a magazine, you may want to include a volume number and issue date.

Campaign Type:
Select the closest match to your content; based on the size of the actual print. If the choices don't fit, let us know

Visibility:
This option allows you to target your campaign at specific countries. For example, if you select the Netherlands, only users in the Netherlands will be able to view your campaign. If your content is available globally or if you are not sure, leave it as “Visible worldwide” to be sure that your users can find your content.

Display Name:

The Title of your campaign as it will be displayed to users. It should convey the name of your brand or publication to the end user. For example, a magazine would use its Cover Name, but without unique information like volume or edition number. 

Display Icon:

The Display Icon will be shown in the Layar app in conjunction with the title of your campaign. We suggest using a logo or other visual mark that is unique to your brand. For the Beta Program, we suggest a square image of 128x128 pixels


Finish up by clicking Save. You can edit this meta data at any time. 

Uploading Pages

 Once you create a campaign, you are immediately brought to the Layar Creator. On the first screen, select “Add New Pages.” 

Screen_Shot_2014-02-18_at_11.26.19.png              Screen_Sho.png

 

Image:
Now you are able to upload your first page! Click “Browse” and find your page on your hard drive. Currently we support JPG, PNG, PDF and ZIP (containing images) files. For tips on what makes a great page, click here.

Title:
The Title of your page is for your use only. We will associate all statistics for this page to the title that you give it. Make it one that correctly identifies what the page is, such as the page number of the publication. If you leave this blank, we will randomly generate a name which you can change later.

What is that red box around one of my pages?
Depending on their visual features, some pages are better than others for use with the Layar Creator. Pages with a red box can not be accepted into our system. See our Tips on what makes a good page.

Once you have selected your pages, click “Add Selected Pages.” You cannot return to this page later, so be sure that you have selected all of the pages that you want to include. If you need to include other pages later, you will need to upload the file again to select them. Be sure not to navigate away from this page until adding is completed. Your images will appear in the left side of the Layar Creator edit screen when they have finished being added.

Buttons

Screen_Shot_2014-02-18_at_11.39.11.png

Now that you have a page, it’s time to place some buttons on it. There are two ways to do this: with our standard buttons, or by uploading your own images and attaching an action to them. 

NOTE: We urge you to not place more than 200 buttons in a single campaign at this time. The Layar app has a limit of 200 augments to optimize performance. If you have more than 200 buttons, we suggest that you create more campaigns.

Standard Buttons

To place a Standard Button, simply select the one that matches your need from the right hand pane. Drag-and-drop it into position on your image, set the properties in the form and click “Apply Changes.” You can drag the button into its final position and can re-size it using the boxes in the four corners surrounding it.

 

You can customize the color and label of the standard buttons. We support up to 30 characters as the Button Label. You can change the color of the buttons with the RGB colorwheel or one of our presets. It is also possible to upload a custom image by selecting "Custom image" 

Basic:

1. Website:

 

  • URL: Add the URL of the mobile-friendly landing page that you want users to see, including http:// or https://.
  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.
  • Label: Choose a custom label that clearly explains what the button does (e.g., change the language or use an abbreviation). For the Beta Program, we enforce strict character limits on these buttons
  • Color: Choose colour for your default button (not applicable for custom buttons)
  • Animation: Choose one of the  appearance animation: Spin, Grow and Pop

2. Call Now:

  • Button Label: Choose a custom label that clearly explains what the button does.
  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.
  • Phone Number: Insert the phone number that you want the user to call, making sure it is properly formatted with country codes and other requirements. When pressed, the number will appear on the user’s phone dialer, but they must then elect to place the call.
  • Color: Choose colour for your default button (not applicable for custom buttons)
  • Animation: Choose one of the appearance animation: Spin, Grow and Pop

3. Buy:

  • Button Label: Choose a custom label that clearly explains what the button does.
  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.
  • URL: Add URL of the mobile-friendly shopping landing page that you want users to see, including http:// or https://.
  • Color: Choose colour for your default button (not applicable for custom buttons)
  • Animation: Choose one of the appearance animation: Spin, Grow and Pop

4. Email Us

  • Button Label: Pick something that indicates whom the recipient of the email will be and what you expect. “Send us your feedback”.
  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.
  • Recipient: Enter in the address bar the recipient’s email address. This should be to someone or a department within your organization.
  • Subject: Enter in a predetermined email subject so that the Recipient can easily identify the email. 
  • NOTE: a user could change this before sending the mail, but that is atypical.

5. Download App

  • Button Label: Choose a custom label that clearly explains what the button does.
  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.
  • Color: Choose colour for your default button (not applicable for custom buttons)
  • Animation: Choose one of the appearance animation: Spin, Grow and Pop
  • Link: You can use either an “Intent to Market” (ITMS) or an HTTP link, but we suggest using ITMS for best results. Here’s how to find your app’s ITMS link:

        -  iPhone

          1) Search for your app at http://itunes.apple.com
          2) Copy & paste the “View in iTunes” link into iPhone link section.
          3) Replace the “http://” with “itms://”.

        - Android

          1) Search for your app at https://play.google.com/store
          2) Go to the App Detail page (example: https://play.google.com/store/apps/details?id=com.layar&feature...). 
          3) Within that URL, copy the “id=com.layar” (where “layar” is your app’s name).   
          4) Add “market://details?” before it (example: market://details?id=com.layar).

6. Add to contacts

  • Button Label: Choose a custom label that clearly explains what the button does.
  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.
  • Color: Choose colour for your default button (not applicable for custom buttons)
  • Animation: Choose one of the appearance animation: Spin, Grow and Pop

7. Show an Image

This options allows you to just show a still image in AR. You can just grad and drop the image you want onto the button area.

Media:

 

1. Play Video:

  •  Video: Enter the URL of your video (H.264 MP4 encoded with Baseline profile level 3.1 for video and AAC codec for audio) or youtube video

NOTE: Check out our How to create and add AR video tutorial.

2. Show Image Carousel:

Upload up to 10 images to create a slideshow on your page. As an example, you could create a carousel of photos from a photoshoot that didn't make it to the final cut, or utilize a transparent background to showcase different colors of an item for sale on the page! We support both JPG and PNG image formats .

3. Show clickable Carousel:

Upload up to 10 images to create a slideshow on your page and link each page to various web pages. As an example, you could create a carousel of photos from a photoshoot that didn't make it to the final cut, or utilize a transparent background to showcase different colors of an item for sale on the page! We support both JPG and PNG image formats .

4. Play Audio:

  • Label: Choose a custom label that clearly explains what the button does.
  • Link to MP3: Enter the URL of your hosted MP3 file. The audio will play in the Layar app when the user taps the button.
  • Autoplay: choose if you want the track to play as soon as a user scan the page or if  users need to tap on the button
  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.
  • Color: Choose colour for your default button (not applicable for custom buttons)
  • Animation: Choose one of the appearance animation: Spin, Grow and Pop

5. Soundcloud widget:

  • Track page: Enter the URL of a sound cloud track
  • Autoplay: choose if you want the track to play as soon as a user scan the page or if  users need to tap on the button

 

 Social:

1. Twitter Feed:

  • Feed type: Select the relevant button for your Twitter Feed.
  • Account: Enter your username or relevant hashtag to allow users to see tweets in real time. Please note that Twitter only allows for 3rd parties, like Layar, to retrieve tweets from up to eight days from the date of request (i.e. when the end user looks at the feed). Please be sure that you link to a time relevant username or hashtag for your publication.

2. Facebook Like

  • Label: Pick something that communicates what your users are about to “Like”. 

    Tip: leave the words Like and Facebook. “Like this on Facebook” or “Like us on Facebook”.

  • URL of your Facebook page: In order to use this feature, you need to supply a link to your company or product’s Facebook page.

  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.

  • Color: Choose colour for your default button (not applicable for custom buttons)

  • Animation: Choose one of the appearance animation: Spin, Grow and Pop

     

3.Facebook Share:

  • Label: Choose a custom label that clearly explains what the button does.
  • URL to Share: Enter a mobile-friendly landing page URL that you want your users to share with their friends on Facebook.
  • Description: This is the description that will be shared on Facebook. We suggest using the same description as the meta-description of the page that you are sharing. As required by Facebook, the user will be prompted to enter their own status message that will be published with your link.
  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.
  • Color: Choose colour for your default button (not applicable for custom buttons)
  • Animation: Choose one of the appearance animation: Spin, Grow and Pop

NOTE: In older Layar versions, users will be taken to our “Generic Share” page. The output will appear the same regardless of the version.

 

4. Follow us on Twitter

  • Label: Pick something that indicates whom the user is about to follow on Twitter.
  • Twitter username: Enter in your twitter username with the @ symbol. Example: @layar.
  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.
  • Color: Choose colour for your default button (not applicable for custom buttons)
  • Animation: Choose one of the appearance animation: Spin, Grow and Pop

5. Tweet:

  • Label: Choose a custom label that clearly explains what the button does.
  • Default Tweet: Enter a message about your page that you would like your users to share, including a mobile friendly landing page URL. Also include a hashtag or your Twitter account if applicable. Users can change this message before they send it, but it is unlikely that they will remove the link.
  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.
  • Color: Choose colour for your default button (not applicable for custom buttons)
  • Animation: Choose one of the appearance animation: Spin, Grow and Pop

6. Share by Email:

  • Label: Choose a custom label that clearly explains what the button does.
  • Default Subject: Pre-populate the subject of the email with an engaging statement related to the page being shared.
  • Body: We suggest including a mobile-friendly link in the body of the the email as well as the name of your company, and what you want your users to share with their friends.
  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.
  • Color: Choose colour for your default button (not applicable for custom buttons)
  • Animation: Choose one of the appearance animation: Spin, Grow and Pop

NOTE: Users can edit both the subject and body of the email, but they are not likely to. Take care with what you write. If in doubt, follow the guidelines that you use for Sharing links on your website.

7. Pin it: 

  • label: Choose a custom label that clearly explains what the button does
  • Pinterest link: The link to the same page on Pinterest, for instance, http://pinterest.com/pin/7881368067390790/
  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.
  • Color: Choose colour for your default button (not applicable for custom buttons)
  • Animation: Choose one of the appearance animation: Spin, Grow and Pop

8. Share Page

 

  • Caption: Choose the text you would like to appear on the social media and the landing page once users share the page

  • Button Label: Pick something that communicates what your users are about to “share”. 

  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.

  • Color: Choose colour for your default button (not applicable for custom buttons)

  • Animation: Choose one of the appearance animation: Spin, Grow and Pop


Advanced

1. HTML widget:

  • URL: Enter a valid URL pointing to a mobile-optimized page.
  • View port(w x h): The viewport dimensions define the virtual browser window size. They affect which part of your website is visible to the end user. The dimensions should match your web page dimensions if you want to display without the need for the user to zoom or scroll.

HTML Limitations:

Flash content and HTML5 features are not supported. 

Some websites may not correctly render your HTML in the preview of the widget in the Creator. This does not impact how content is displayed in the app; be sure to test your page with the Layar app.

2. Launch Geo-Layer

  • Target layer name: The name of the geo layer that you have created using Layar Developer API
  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.
  • Color: Choose colour for your default button (not applicable for custom buttons)
  • Animation: Choose one of the appearance animation: Spin, Grow and Pop

3. Hotspot Json 

  • Json: Enter your Json code snippet

4. Launch App

  • Label: Choose a custom label that clearly explains what the button does.
  • Target: Choose if the the URI is the same for all Platforms or specific (Android or iOS)
  • URI: Enter a valid URI  launching an app.
  • Appearance: Choose between the default button or a custom button you wish to use and can upload on Creator.
  • Color: Choose colour for your default button (not applicable for custom buttons)
  • Animation: Choose one of the appearance animation: Spin, Grow and Pop

Tips for your content:

  • Link to pages optimized for mobile devices.
  • Link to trusted content. No spam, please.
  • Link to content that is relevant to your page. For example, if you are augmenting your car ad, link to a promotional video or a “Find a Dealer” mobile webpage.
  • Incentivise users to take their phones out and scan by promoting your augmented content in other places (e.g., on your website).


Tips for placing buttons:
Every page is different. Where you choose to place your buttons is less of a technical decision and much more an aesthetic one. Place your buttons where it makes the most sense to you and the user. It should look natural in context with the physical object, but should not blend in so much that the user can’t immediately find it. However, we do have one technical suggestion: buttons function better when placed on more visually busy images and not on blank spaces that lack features. Be sure to test the stability of your buttons yourself before publishing your campaign. 

How do I test it ?
Create a campaign, add buttons and save your pages. On your Android or iPhone, open Layar and log in (Layers > Settings > Account) with the account with which you use Creator. Focus on your page and tap “Scan”. When your campaign loads, focus on the page again and your buttons should appear. If your buttons are not holding in place well, try moving them to a different part of the image in the Layar Creator.

NOTE: If there is more than one match on a page, a list of results is shown. Select yours by the Title.

Custom Buttons (Only premium account)
In case our buttons don't agree with your branding (e.g., actions, style, etc.) and you frequently use the same buttons you can upload your own and create your list with custom buttons. You can select any of the Standard Button action types, but if you have suggestions for other actions, please let us know. Here's how to get started:

  1. Click “Custom” in Layar Creator.
  2. Click “Create Button.”
  3. Enter a title (used for your organizational purposes and statistics).
  4. Select your button image.
  5. Finally, select an action that you want the user to take (e.g., opening a mobile webpage or dialing a phone number).
  6. Save the button, and it’s ready to be placed on a page.
  7. Select a page.
  8. Drag your button onto the page.
  9. Fill out the form information.
  10. Click “Apply Changes” and you’re done. Then just be sure to test it!


Tips:

  • Once uploaded, a button is available for use in any of your campaigns. Don’t worry about uploading the same button multiple times for different campaigns.
  • If you delete a button, it will subsequently be deleted from any pages on which it appears.

 Add Pages
You can upload new pages at any time by clicking “+ Pages” button. Here you can also import pages from another campaign with or without the buttons.

Reorder Pages

  1. Select a page from the left side panel and drag it to the desired order.

NOTE: This has no bearing on ordering in the app or how results are delivered to the user. This is for your personal organizational purposes only.

Delete a Page

 

  1. Hover your mouse over the desired page and click the trash can icon.
  2. Click “OK" to delete the page.

NOTE: Deletions are final. This cannot be undone!

Rename or Change Type of Page

 

  1. Hover your mouse over tag congaing the page name.
  2. Make the desired changes to the page, changes are automatically saved.


Import Pages from Another Campaign

  1. Go to “Manage Pages,” and select “Pick from other campaign.”
  2. Select the desired campaign from the drop down menu in the upper-right corner.
  3. Click the desired page(s) to add and click “Add selected pages.”

NOTE: Be sure not to navigate away from this page until adding is completed.

 

Campaign Maintenance: Publish, Edit, Archive, Delete

Draft:
Upon initial creation, each campaign is designated as a “Draft.” This means that only you (and Layar Support Staff) can view the content when logged into the Layar app or Creator website. It is strongly recommended that you test your campaign on a device before you publish it. 

Publish:
To allow all users to see your content in the app you need to publish your work. To do that you can:

either press the "Publish" button within the campaign

or  go to “Campaign Overview. hover over the campaign icon ”Click “Publish”.

NOTE: Before you publish, be sure that you tested each of your pages.

Archive:
If your campaign is complete and you want to hide it from public view, you can choose to Archive your content. You can always republish this content at any time. To get started, first go to “Campaign Overview.” Select the  “trash” icon shown on top right of the campaign icon. On the pop out window select Archive campaign. 

Delete
You may need to clean up your workspace from time to time. You can delete Archived campaigns by clicking on the “trash” icon in “Campaign Overview”. 

NOTE: All deletions are final. Layar staff cannot recover this content once it is deleted.

 

It is also possible to filter your campaign overview. Screen_Shot_2014-02-18_at_11.20.16.png

 

Select Draft and published if you want to see only active campaigns. It is also possible to select only one or more campaign states to view. 

 
Topic is closed for comments