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>