Skip to main content

Project

A project is embedded on the page using the following markup. It can be embedded either "inline" with the rest of your content, or in a "lightbox" that opens when a user clicks on a "trigger". The trigger will be embedded in line with the rest of your content but is much smaller than a full project.

Embedding methods​

Native Inline (iframe)​

This will load the player directly in the user's browser, generating an impression log immediately

<smrtzr-project projectId="YOUR_PROJECT_ID"></smrtzr-project>

Inline (iframe only added on click)​

A lighter version of the splashscreen will be shown until the user clicks to play. This reduces load on your page but some features on the splashscreen such as autoplay and the add to calendar button will not be available. Session logs for analytics will also only log once the user has clicked play

<smrtzr-project projectId="YOUR_PROJECT_ID" embedStyle="inline"></smrtzr-project>

Please see lightbox for more information on how to customise the lightbox.

<smrtzr-project projectId="YOUR_PROJECT_ID" embedStyle="lightbox"></smrtzr-project>

Common Attributes​

You can also add the following optional attributes to the smrtzr-project tag:

  • loop - If true, the project will loop when it reaches the end
  • autoplay - If true, the project will autoplay
  • addToCart - If true, and you are using an API to import your products, products will have variants and extra buttons if applicable
  • region - The region of the user (used for the region plugin)
  • lang - The language of the user (used for the language plugin)
  • distribution - Any distribution flag you would like passed through to the player for analytics purposes
  • pictureInPicture - If true, the project will collapse into a picture in picture mode when the user clicks a CTA that would open a new tab
  • inlineAwaitConfirmation - If true, the project will show a loader when a cta_inline is clicked, and requires a response to be sent back to the player. Please see SDK Events for more information
  • utm_[parameter_name] - utm parameters can be added to track various analytics data. Examples of utm parameters are utm_source=google and utm_medium=social. If added, every time a user clicks through to your site from a Smartzer player, the utm_* parameters will be appended to the URL, allowing you to continue to track the utm_* parameter(s)
  • height - Customize the height of the player by passing in one of the following options to the height attribute*:
    • small equals to 60vh (60%)
    • medium equals to 80vh (80%)
    • large equals to 100vh (100%)
    • 16/9 will force the player to keep this landscape ratio,
    • 9/16 will force the player to keep this portrait ratio

* If more control is needed over the dimensions of the player, it is also possible to further customize it with CSS.