widget-countdown.html

---
layout: documentation-single
---

<link id="widget-theme-simple" rel="stylesheet" href="{{ "/products-and-docs/widgets/countdown/1.0.0/theme/simple_countdown.css" | prepend: site.baseurl }}">
<link id="widget-theme-fullwidth" rel="stylesheet" href="{{ "/products-and-docs/widgets/countdown/1.0.0/theme/fullwidth.css" | prepend: site.baseurl }}">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.1.5/css/bootstrap-slider.min.css">

<div class="widget-content-wrapper">
  <div class="row row-native">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <h1>COUNTDOWN WIDGET</h1>
      <p class="lead">The TM Widgets allow partners to setup particular widgets and provide enhanced discovery experience for consumers within copy/paste distance.</p>
      <h2>Widget: Keyword search</h2>
      <p>You can use the widget configurator below to customize the layout of the widget, and grab a small code snippet to insert into your website.</p>
    </div>
  </div>

  <div class="row row-native">
    <div class="col-lg-4 config-block">
      {% include widget-countdown-config.html %}
    </div>

    <div class="col-lg-8 col-lg-widget">
      <div class="widget-container-wrapper">
        <div class="widget-container">
          <div
            w-type="countdown"
            w-tmapikey=""
            w-id="vvG1VZfp5YNjko"
            w-theme="simple_countdown"
            w-width="350"
            w-height="600"
            w-borderradius="4"
            w-layout="vertical"
            w-proportion="custom"
          ></div>
        </div>
      </div>

      <div class="row hidden-lg row-mobile-control">
        <div class="row row-native">
          <div class="col-md-3 col-sm-3">
            <button type="button" class="js_get_widget_code btn btn-block button button-blue widget_config__btn">GET CODE</button>
          </div>
          <div class="col-md-3 col-sm-3">
            <button type="button" class="js_reset_widget btn btn-block button-white-gray-border widget_config__btn">RESET</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="disqus_thread"></div>
<script>
  var disqus_config = function () {
    if (window.location.hostname != 'developer.ticketmaster.com') {
      var pageURL = window.location.href.replace(window.location.host, 'developer.ticketmaster.com');
      this.page.url = pageURL || "http://developer.ticketmaster.com/";
    }
    else this.page.url = document.URL || "http://developer.ticketmaster.com/";
    this.page.identifier = "{{page.title}}";
  };
  (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');

    s.src = '//ticketmasterapi.disqus.com/embed.js';

    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
  })();
</script>

<!-- Modal widget-->
<div id="js_widget_modal" class="modal modal-common fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
        <div class="row">
          <h3 class="modal-title col-lg-12">Embedded code</h3>
        </div>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-12">
            <h4>HTML</h4>
            <div class="copy-btn" rel="tooltip" data-placement="top" data-original-title="Copy to Clipboard" data-clipboard-target="#widget-code-tag"></div>
            <code class="language-html widget_dialog__code" data-lang="html" id="widget-code-tag"></code>
            <h4>JavaScript</h4>
            <div class="copy-btn" rel="tooltip" data-original-title="Copy to Clipboard" data-placement="top" data-clipboard-target="#widget-code-script"></div>
            <code class="language-js widget_dialog__code" data-lang="js" id="widget-code-script">
              &lt;script src="https://ticketmaster-api-staging.github.io/products-and-docs/widgets/countdown/1.0.0/lib/main-widget.js"&gt;&lt;/script&gt;
            </code>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button id="js_widget_modal__close" type="button" class="btn btn-submit text-center">Ok</button>
      </div>
    </div>

  </div>
</div>
<!-- Modal widget end-->


<!-- Modal has no code-->
<div id="js_widget_modal_no_code" class="modal modal-common modal-common-sm fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-body">
        <h3 class="modal-title col-lg-12 text-center">Warning</h3>
        <p class="text-center">There are no such events</p>
        <div class="modal-footer">
          <button id="js_widget_modal_no_code__close" type="button" class="btn btn-submit text-center">Ok</button>
        </div>
      </div>
    </div>

  </div>
</div>
<!-- Modal has no code end-->

<script type="text/javascript" src="{{'/scripts/components/api-key-service.js?v=1' | prepend: site.baseurl }}"></script>
<script type="text/javascript">
  // Get default widget API_KEY
  var defaultApiKey = apiKeyService.getApiWidgetsKey();
  // Set default widget API_KEY for config. input and widget
  $('[w-type=countdown]').attr('w-tmapikey', defaultApiKey);
  $('#w-tm-api-key').val(defaultApiKey);
</script>

<script src="{{'/products-and-docs/widgets/countdown/1.0.0/lib/main-widget.js?v=1' | prepend: site.baseurl }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/6.1.5/bootstrap-slider.min.js"></script>
<script src="{{'/products-and-docs/widgets/countdown/1.0.0/lib/main-widget-config.js?v=2' | prepend: site.baseurl }}"></script>

<!--add copy button to modal-->
<script src="{{'/scripts/vendors/clipboard.js' | prepend: site.baseurl }}"></script>
<script src="{{'/scripts/components/clipboard-fallback.js' | prepend: site.baseurl }}"></script>
<script src="{{'/scripts/components/clipboard-init.js' | prepend: site.baseurl }}"></script>