What is an iframe?

The Meshmorph iframe is an easy, fast and reliable way to enhance your website capabilities by instantly enabling 3D viewing and augmented reality features within your content.

How to use Meshmorph iframe on another site?

To get the default HTML code for the Meshmorph IFrame:

  1. Set a gallery item as a “Public”.
  2. Click on the “iframe” link located at the right bottom menu below the 3D viewer
  3. Copy the HTML shown on screen.
  4. Include this snippet of code in your own html.
  5. For advanced features, append a JSON file url in the source attribute

See the table below for a description of all available flags to customize iframe settings also to activate advanced features like event messaging to enable IOS Apple Pay button in AR.

Note:Unless specified, the width and height of the iframe automatically adjusts to its parent container’s dimensions

Advanced configuration

Premium and business memberships include advanced iframe configuration features. These configurations allow you to personalize the Meshmorph’s 3D player to perfectly fit with the theme and specifications of any website or application.

To activate advanced features, configuration data should be passed to the iframe by appending a publicly accessible URL to a file or a JSON endpoint as a query string parameter with the key “configUrl” to the iframe source url on page load.

<iframe id="meshmorph" width="100%" height="100%" frameborder="0" src=""></iframe>
<script>
  var config_url = encodeURI('https://example.com/config.json'); 
  var iframe = 'https://www.meshmorph.com/iframe/embed/PUBLIC_GALLERY_ID?configUrl='+config_url;
    document.getElementById('meshmorph').src = iframe;
</script>

JSON configuration data specification: 

{
  "allow_zoom":"true or false",
  "animation_play":"true or false",
  "ar_button_pos_from_bottom_percent":"integer",
  "ar_button_pos_from_right_percent":"integer",
  "augmented_reality":"true or false",
  "auto_rotation":"true or false",
  "background_color":"none or color",
  "camera_distance_meters":"float number",
  "camera_field_of_view_degrees":"float number",
  "camera_init_angle_phi_degrees":"float number",
  "camera_init_angle_theta_degrees":"float number",
  "camera_interaction":"true or false",
  "camera_orbit_phi_min_limit_degrees": "float number",
  "camera_orbit_phi_max_limit_degrees": "float number",
  "camera_orbit_theta_min_limit_degrees": "float number",
  "camera_orbit_theta_max_limit_degrees": "float number",
  "center_object_on_load": "true or false",
  "custom_ar_icon":"url or see AR icon specification below",
  "custom_load_icon":"none or url",
  "environment_image":"none or url",
  "interaction_hint":"true or false",
  "interaction_hint_style":"move or static",
  "ios_banner": "true, false or see IOS banner specification below",
  "light_exposure":"float number",
  "link_block":"true or false",
  "poster_image":"none or url",
  "qrcode":"true, false or see QR code specification below",
  "rotation_degrees_second":"float number",
  "shadow_intensity":"float number",
  "shadow_softness":"integer",
  "skybox_image":"none or url",
  "social_block":"true or false",
  "theme":"radix_blue, rosey_petals, curious_violet, alpha_gray",
  "viewer_tools":"true or false"
}

JSON object specification for IOS Banner ("ios_banner"):

Call to action 

{
  "ios_banner": {
    "call_to_action": {
      "action_title":"string",
      "checkout_title":"string",
      "checkout_subtitle":"string",
      "price":"string"
    }
  }          
}

Apple Pay 

{
  "ios_banner": {
    "apple_pay": {
      "button_type":"plain, pay, buy, check-out, book, donate or subscribe",
      "checkout_title":"string",
      "checkout_subtitle":"string",
      "price":"string"
    }
  }         
}

Custom Banner 

{
  "ios_banner": {
    "custom": {
      "url":"url - must be https",
      "custom_height":"small, medium or large"
    }               
  }         
}

QR Code object specification

It is possible to override the QR Code automatically generated by the system which points to the original gallery post at Meshmorph.com. This override is commonly used to point users to the actual page where the iframe is being displayed.

{
  "qrcode": {
    "url":"url",
    "label":"empty, true, false"
  }              
}

AR icon object specification

When setting up a custom AR icon, it is possible to specify the width and height of the loaded svg. Only integer values as strings are accepted

{
  "custom_ar_icon": {
    "url":"url",
    "width": "integer or percentage",
    "height": "integer  or percentage"
  }              
}

Catching the IOS Banner event

When tapped, the IOS banner fires a javascript event that is propagated to the parent site containing the iframe. To catch this event, an event listener must be defined to listen to window “message” events.

As a security measure, it is recommended to filter the event to only execute if the event is received from https://www.meshmorph.com to prevent intruders from firing this event from malicious sources.

<iframe id="meshmorph" width="100%" height="100%" frameborder="0" src=""></iframe>

<script>
  var config_url = encodeURI('https://example.com/config.json'); 
  var iframe = 'https://www.meshmorph.com/iframe/embed/PUBLIC_GALLERY_ID?configUrl='+config_url;
  document.getElementById('meshmorph').src = iframe;

  window.addEventListener('message', handleMessage, false);
  function handleMessage(e) {
    //Reject events not fired by meshmorph iframe
    if (!event.origin.endsWith('meshmorph.com')) { return; }
  
    //The string e.data.gid contains the id of the gallery item
    //When multiple iframes in one page e.data.gid can be used
    //to identify which iframe triggered this event
    if(e.data.eid == '_apple_ar_quicklook_button_tapped') {
      alert('IOS Button Tapped with id: ' + e.data.gid);
    }
  }
</script>

Available Configurations

general

Key Description Available Values Scope
allow_zoom Enable or disable camera zoom true, false Business
animation_play Enable animation autoplay on load true, false Premium, Business
ar_button_pos_from_bottom_percent Set the absolute bottom distance of the AR button within the 3D player Float number from 0 Premium, Business
ar_button_pos_from_right_percent Set the absolute right distance of the AR button within the 3D player Float number from 0 Premium, Business
augmented_reality Enable or disable all augmented reality capabilities true, false Business
auto_rotation Enable or disable player autorotation true, false Premium, Business
background_color Overrides the theme background color with a custom color none, #6 digit hexadecimal color Premium, Business
camera_distance_meters Set the camera distance from the 3D object Float number from 0 Business
camera_field_of_view_degrees Set the camera’s focal length Float numbers from 0.1 to 120 Business
camera_field_of_view_degrees_max Set the camera’s max focal length Float numbers less or equals to 120 Business
camera_field_of_view_degrees_min Set the camera’s min focal length Float numbers greater or equals to 0.1 Business
camera_init_angle_phi_degrees Set the initial camera angle in the vertical axis Float positive or negative numbers Business
camera_init_angle_theta_degrees Set the initial camera angle in the horizontal axis Float positive or negative numbers Business
camera_interaction Enable or disable all camera controls true, false Premium, Business
camera_orbit_phi_max_limit_degrees Limit the maximum orbit angle allowed in the vertical axis Float positive numbers Business
camera_orbit_phi_min_limit_degrees Limit the minimum orbit angle allowed in the vertical axis Float positive numbers Business
camera_orbit_theta_max_limit_degrees Limit the maximum orbit angle allowed in the horizontal axis Float positive numbers Business
camera_orbit_theta_min_limit_degrees Limit the minimum orbit angle allowed in the horizontal axis Float positive numbers Business
center_object_on_load Center model in player or use its local 0 axis as center point true, false Business
custom _ar_icon Override default AR icon with a custom image url (http or https), only svg supported. see AR icon object specification for override Business
custom _load_icon Override default loading icon with a custom image url (http or https), only svg supported Business
environmnet_image Overrides the 3D player environment image. Spherical image recommended none, url (http or https) to jpg, png or hdr Premium, Business
interaction_hint Enable or disable the interaction call to action of player true, false Premium, Business
interaction_hint_style Customize presentation style of interaction hint move, static Premium, Business
ios_banner Enable, disable or customize IOS banner button for Quicklook AR true, false, see IOS banner object specification for override Premium, Business
light_exposure Customizes global illumination of the 3D scene Float number from 0 to 100 Premium, Business
link_block Enable or disable Meshmorph link to gallery post true, false Premium, Business
poster_image Overrides the default poster image shown at load none, url (http or https) to jpg or png Premium, Business
qr_code Enable, disable or override destination QR code for non mobile devices true, false, see QR Code object specification for override Premium, Business
rotation_degrees_second Customize the speed of auto rotation per second Float numbers from 0 to 180 Business
shadow_intensity Customizes the intensity dynamic shadows Float numbers from 0 to 1, use 0 to disable Premium, Business
shadow_softness Customizes the blur edge gate of the shadow Float numbers from 0 to 1, use 0 to disable Premium, Business
skybox_image Overrides the 3D player skybox. Spherical image recommended none, url (http or https) to jpg, png or hdr Premium, Business
social_block Enable or disable the social block of item current views and likes true, false Premium, Business
theme Overrides the selected theme defined on the gallery post page radix_blue, rosey_petals, curious_violet, alpha_gray Premium, Business
viewer_tools Enable or disable experimental viewer features like face recognition for rotation true, false Premium, Business

iosBanner

Key Description Available Values Scope
apple_pay Sets the banner to appear as Apple Pay button See IOS banner object specification for available values Business
call_to_action Sets the banner type to a generic customizable call to action block See IOS banner object specification for available values Premium, Business
custom Enables custom HTML to appear as banner from a provided URL location See IOS banner object specification for available values. HTTPS urls supported Business

qrCode

Key Description Available Values Scope
label Enable or disable the “Sent to AR” label shown by default on AR button click on non-mobile devices true, false Premium, Business
url Set the url location of a custom web address shown in player as a QR code url to custom page (http or https) Premium, Business
The motivation behind Meshmorph® is to streamline the crossover between 3D modeling and Augmented Reality, the Metaverse is here and we help all crowds to reach it.

Ricardo Olivo, CEO @Meshmorph

Learn
Pricing
About Us