SquadUP Widget Customizer

Preview

Generated Code

<link rel="stylesheet" href="https://embed.squadup.com/default/css/bootstrap-namespace.min.css">
<style>
      /* Text Colors */
      .start-at,
      .squadup-checkout-app .squadup-row-centered > .squadup-navigation-view-container .page-title-ident,
      .squadup-checkout-app .squadup-navigation-view-container .squadup-checkout-nav a,
      .squadup-checkout-app .squadup-navigation-view-container .su-nav-switcher-container a:not(.active),
      .squadup-user-banner > h1,
      .title { 
        color: #000000 !important; 
      }
      .event-title { 
        color: #ffffff !important; 
      }

      /* Primary Color Elements */
      .date,
      a.active,
      .btn-danger,
      .squadup-checkout-app .squadup-navigation-view-container .squadup-checkout-submit-payment { 
        background-color: #000000 !important;
        border-color: #000000 !important;
        color: #ffffff !important;
      }

      /* Border Elements */
      .squadup-checkout-event-box,
      .squadup-checkout-app .squadup-navigation-view-container .su-nav-switcher-container a,
      .squadup-checkout-app .squadup-row-centered > .squadup-navigation-view-container .page-title-ident {
        border-color: #000000 !important;
      }

      /* Primary Button Hover */
      .btn-danger:hover,
      .squadup-checkout-app .squadup-navigation-view-container .squadup-checkout-submit-payment:hover {
        background-color: #000000 !important;
        border-color: #000000 !important;
      }

      /* Accent Color Buttons */
      .btn-primary,
      .tix-button,
      .btn-info { 
        background-color: #ff0000 !important;
        border-color: #ff0000 !important;
        color: #ffffff !important;
      }

      /* Accent Button Hover States */
      .btn-primary:hover,
      .tix-button:hover,
      .btn-info:hover {
        background-color: #f50000 !important;
        border-color: #f50000 !important;
      }

      /* Loading Spinner */
      .squadup-checkout-app .squadup-checkout-embed-spinner ul.cssload-loader li {
        background-color: #000000 !important;
      }
    </style>
<div id="squadup-checkout"></div>
<script>
    squadup = {
        title: 'SquadUP Events',
        image: 'https://s3.amazonaws.com/checkout.squadup.com/squadup-logo.png',
        root: 'squadup-checkout',
        userId: [5505139],
        eventId: 100003,
        shoppingCartEnabled: true,
        descriptionEnabled: true
    }
</script>
<script src="https://embed.squadup.com/main-v2.min.js"></script>