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>

Lightbox

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)

Custom Trigger

You can customise the appearance of the trigger by using "slots". Both lightbox and inline embed styles are supported.

Easy mode

You can pass a custom element to the sdk so that you can create your own lightbox trigger. This is done by passing a child element to the smrtzr-project element. The child element must have a slot="customTrigger" attribute on it. If we detect an element that matches the slot, we will search for the first img in the element, and if it exists, we will apply the project thumbnail to it. We will also search for the first button in the element, and if it exists, we will apply the onclick event required to open the project lightbox. You can then style this element however you would like.

<smrtzr-project projectId="YOUR_PROJECT_ID_HERE" embedStyle="lightbox">
  <div slot="customTrigger">
    <button>
      <img />
    </button>
  </div>
</smrtzr-project>

Hard(er) mode

If you would like to have access to more fields or decided which element is used as the trigger a lightbox, you can instead use the following code. All elements in the code below are optional, and if not found, just won't be used. The wrapping component must have a slot="customTriggerWrapper" attribute on it.

What slots can I use?

• lightboxTrigger - this is the element we will attach the onclick event to open the lightbox (we recommend this is a button element)
• triggerImage - this is the element we will apply the project thumbnail to
• textRow1 - this is the element we will add the first row of the "title" determined by the lightboxTriggerTextSource attribute
• textRow2 - this is the element we will add the second row of the "title" determined by the lightboxTriggerTextSource attribute (if it exists)
• textRow3 - this is the element we will add the third row of the "title" determined by the lightboxTriggerTextSource attribute (if it exists)
• textRow4 - this is the element we will add the fourth row of the "title" determined by the lightboxTriggerTextSource attribute (if it exists)
• If you are embedding a livestream project, and it has a countdown timer, then you can use the following slots:
  • countdownDays - this is the element we will apply the days remaining to
  • countdownHours - this is the element we will apply the hours remaining to
  • countdownMinutes - this is the element we will apply the minutes remaining to
  • countdownSeconds - this is the element we will apply the seconds remaining to

Please note this code is just an example and can be structured however you would like, as long as the top level parent has the slot="customTriggerWrapper" attribute on it.

<smrtzr-project
  projectId="YOUR_PROJECT_ID_HERE"
  embedStyle="lightbox"
  lightboxTriggerTextSource="splashscreen"
  loop
  autoplay
>
  <div slot="customTriggerWrapper">
    <button slot="lightboxTrigger">
      <img slot="triggerImage" />
      <div>
        <div><span slot="textRow1"></span></div>
        <div><span slot="textRow2"></span></div>
        <div><span slot="textRow3"></span></div>
        <div><span slot="textRow4"></span></div>
      </div>
      <div>
        <span slot="countdownDays"></span>
        <span slot="countdownHours"></span>
        <span slot="countdownMinutes"></span>
        <span slot="countdownSeconds"></span>
      </div>
    </button>
  </div>
</smrtzr-project>