How to embed Transmog in your website

You need a valid subscription to use Transmog on your site. New subscribers enjoy a free trial allowing you to try before you buy.

Once you have your Paypal generated subscription username and password, follow these instructions to embed the iphone simulator.

Step 1. Register your domain

Register the domain of the website that will host the simulator e.g. example.com. Only 1 domain can be registered to a subscription.

Your user name as provided by Paypal
Your password as provided by Paypal
The domain or hostname of the page that will host the simulator

Lost username or password? You can find this information listed on the subscriptions details page of your Paypal account.

Step 2. Generate your simulator code

Set the options to create your simulator. Options can be manually edited in the source at any time except the key value.

Your user name as provided by Paypal
The URL to be simulated on page load
Your preferred simulator skin
Show or hide the Browse To URL field
The background color to the iframe window (HEX value)
The color of text within the iframe window (HEX value)
The scrollbar appears in this color (HEX value)

Lost username or password? You can find this information listed on the subscriptions details page of your Paypal account.

Step 3. Copy and paste

Paste the following code just before the closing </head> tag on your page

<script type="text/javascript" src="http://transmog.net/script/embed.js"></script>

Paste the following code into the body section where you would like to simulator to appear.

Generate your configuration code in step 2 above.

Options can be manually edited in the source (except the key value). You can style the container div as required.

Multiple instances

Keeping the container_id unique on your page, you can generate more than one instance of the simulator on your page. Great for comparing mobile websites.

Loading a mobile site dynamically

The simulator will sniff for a URL parameter that conincides with the container_id in the hosted page. If set, this value will override the pre-configured loading URL in the simulator that corresponds to that container.

This makes it simple to dynamically load a mobile website into the simulator through the page URL. This could be part of an email marketing campaign that shows potential clients their website in a mobile device. Most effective if you position the simulator next to an example from your portfolio.

Suggested URL structure, click through for demonstration of a campaign landing page: www.your_website.com/your_camapaign_landing_page.php?container_id=www.potential_client_website.com

Notes about Transmog

User Agent

The simulator identifies itself with the following user agent:

  • Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148a Safari/6533.18.5

Developers

  • For best results, use a webkit browser (i.e. Safari or Google Chrome).
  • Page requests are sent with an iPhone user agent (as above) to help test mobile browser detection process.
  • The onorientationchange event is triggered if a handler is specified in the body tag as per documentation: Handling Orientation Events
  • Mobie Safari specific meta tags (including viewport) are supported as per Safari Webkit library.
  • Touchscreen scrolling is simulated with left-click and drag. [Update: only available with older version.]
  • Pinch and zoom is simulated with magnify buttons. [Update: only available with older version.] Non-mobile websites with no viewport meta tags are rendered full width with zoom capability as an imitation of Mobile Safari - best results in webkit browsers.
  • The Mobile Safari back button is enabled.
  • The rendering script will interpret javascript, but advanced scripting may not run faithfully and cause errors.

While the simulator is routinely reviewed to provide better fidelity, please understand that this website offers a simulation service only and results may be unreliable for complicated web projects.

Links

jQTouch — jQuery plugin for mobile web development

15 Useful HTML5 Tutorials and Cheat Sheets

PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores

User agents and ID strings for mobile devices

Thank you