Streaming Modal

START STREAMING NOW ON PARAMOUNT+

The streaming home of SHOWTIME

START YOUR FREE TRIAL

ALREADY HAVE PARAMOUNT+ WITH SHOWTIME?

SIGN IN

ONLY HAVE SHOWTIME?

For subscribers who signed up through the SHOWTIME website or the SHOWTIME app.

SIGN IN

For subscribers who signed up through a cable, satellite, telco or streaming service provider.

SIGN IN

<!-- required for image -->
<meta name="streaming-modal-image" content="https://www.sho.com/site/image-bin/images/1002742_5_0/1002742_5_0_01h_640x360.jpg" />
<!-- custom order button label -->
<a href="#" class="global-nav__item--red" data-location="utility">Get It Now</a>
<div class="series-home">
<!-- END required for image -->
<div class="streaming-modal modal-open streaming-modal--order-promo streaming-modal--with-image"
    data-context="streaming modal">
    <div class="streaming-modal__image">
      <div class="streaming-modal__image-container">
        <div class="streaming-modal__image-container__shim"></div>
        <img src="https://www.sho.com/site/image-bin/images/1034344_2_0/1034344_2_0_01h_640x360.jpg" alt="">
      </div>
    </div>
    <div class="streaming-modal__order-promo">
      <div class="streaming-modal__headline">START STREAMING NOW ON <span class="streaming-modal__logo">PARAMOUNT+ WITH SHOWTIME</span></div>
      <a class="button--solid-white streaming-modal__order-promo-button" href="https://www.paramountplus.com/?cbscidmt=showtimebundle&ftag=PPM-22-10bdd2f" data-track="" data-label="order">START YOUR FREE TRIAL</a>
    </div>
    <div class="streaming-modal__headline">ALREADY HAVE PARAMOUNT+ WITH SHOWTIME?</div>
    <div class="streaming-modal__option streaming-modal__option--pplus">
      <a class="streaming-modal__button" href="https://www.paramountplus.com/account/signin/?ftag=PPM-22-10bdd2f" data-track="" data-label="paramount plus">SIGN IN</a>
    </div>
    <div class="streaming-modal__headline">ONLY HAVE SHOWTIME?</div>
    <div class="streaming-modal__option streaming-modal__option--showtime">
      <p class="streaming-modal__copy">For subscribers who signed up through the SHOWTIME website or the SHOWTIME app.</p>
      <a class="streaming-modal__button" href="https://www.showtime.com/#/series/1002742?i_cid=int-ray-6194" data-track="" data-label="standalone">SIGN IN</a>
    </div>
    <div class="streaming-modal__option streaming-modal__option--showtime-anytime">
      <p class="streaming-modal__copy">For subscribers who signed up through a cable, satellite, telco or streaming service provider.</p>
      <a class="streaming-modal__button" href="https://www.showtimeanytime.com/#/series/1002742?i_cid=int-ray-6194" data-track=""
        data-label="anytime">SIGN IN</a>
    </div>
  </div>

The JavaScript aspect of this modal has some minor complexities. The URL hash gets transformed into slugs that can be appended to the two outgoing links in the modal as working deep links to those two services. Also, an i_cid in the hash (if present) is transformed into a query parameter on both outgoing links.