Ready to Use Custom Templates

Check out these landing page templates we made for you! Use them to customize your calendars and events.

To use these templates, all you need to do is copy all the code from the HTML block of the template you like and paste it into your own Custom Template. Check out how to make a template here for event landing pages and here for calendar landing pages.

Calendar Templates

Nature Theme

Check out the calendar landing page here.


<!DOCTYPE html>
<html>
<head>
  <title>AddEvent</title>
  <meta name="Description" content="" />

  <!-- Open graph meta tags -->
  <meta property="og:title" content="{{title}}" />
  <meta property="og:description" content="{{description}}" />
  <meta property="og:image" content="https://cdn.addevent.com/libs/imgs/ogland.png" />

  <!-- Twitter cards -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="" />
  <meta name="twitter:title" content="{{title}}" />
  <meta name="twitter:description" content="{{description}}" />
  <meta name="twitter:image" content="https://cdn.addevent.com/libs/imgs/ogland.png" />

  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width" />
  <meta name="robots" content="noindex, follow" />
  <link rel="canonical" href="https://www.addevent.com/calendar/{{calendar-id}}" />

  <!-- Fonts and stylesheet -->
  <link type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" media="all" />
  <link type="text/css" href="https://cdn.addevent.com/libs/cal/css/calendar.landingpage.v20220801.css" rel="stylesheet" media="all" />

  <!-- jQuery + jQuery UI + landing page script (DON'T REMOVE) -->
  <script type="text/javascript" src="https://cdn.addevent.com/libs/jquery/jquery-3.5.1.min.js"></script>
  <script type="text/javascript" src="https://cdn.addevent.com/libs/cal/js/calendar.landingpage.v20220801.js"></script>
  <script type="text/javascript" src="https://cdn.addevent.com/libs/general/qrcode.min.js" async defer></script>
  <script type="text/javascript" src="https://cdn.addevent.com/libs/stc/1.0.2/stc.min.js" async defer></script>

   <style>
    
    html, body {
      
     background: url('https://i.imgur.com/LsWMUjv.jpg');
     background-size: cover; /* or "contain" depending on what you want */
     background-position: center center;
     background-repeat: no-repeat;
     
    }
     .body {min-height: 100vh;min-width: 100wh;}

    .box {
      background-color: #CDD59F !important; 
     }
     
      *:not(.material-icons, material-icons-outlined) {font-family: 'Work Sans', sans-serif,!important; font-weight: 300 !important;}
     
  </style>
  
  
</head>
<body>

<div class="wrap">
  <div class="box">
    <div class="pad">
    
        <!-- Block: Calendar Title -->
        {{block:title}}
         
        <!-- Block: Upcoming count -->
        {{block:upcoming-01}}

        <!-- Block: Calendar Description -->
    <div class="row description" data-truncate="false" data-truncate-rows="5">
                <div class="inn">
                    <p>{{description-formatted}}</p>
                </div>
                <div class="readmoreblock">
                    ...<br /><a href="#" title="" class="readmorelink">Read more</a>
                </div>
            </div>
        <!-- Warning to let users know that they have visited the page before -->
        <div class="brkbox-t1 hide" id="warning-subscribed-before" data-value="{{user:subscribed}}">
            <div class="bx">
                <p>
                    <strong>Please notice!</strong> 
                    It looks like you might already have subscribed to the calendar. 
                    It's fine — we just wanted to make you aware of that. 
                </p>
                <i class="ico material-icons">warning</i>
            </div>
        </div>
        
        <!-- User is required to put in info -->
        {{if:is-info-req}}
            {{block:register-button}}
            {{block:register-form}}
        {{endif}}

        <!-- User is not required to put in info -->
        {{if:is-info-not-req}}
           <div class="button-register-t1" id="subform-regi">
              <div class="flt-t1">
                  <div title="Add to Calendar" class="addeventstc" style="background-color: #718D40 !important;" data-id="{{button-calendar-id}}">
                      Add to Calendar
                  </div>
              </div>
              <div class="flt-t2">
                  <div class="c0">Works with</div>
                  <div class="c1"></div>
                  <div class="c2"></div>
                  <div class="c3"></div>
                  <div class="c4"></div>
                  <div class="c5"></div>
              </div>
              <div class="clr"></div>
          </div>
        {{endif}}
        
        <!-- Block: Share -->
        {{block:share}}
    
    </div>

    <!-- About following a calendar -->
    {{block:about}}

  </div>

  <!-- Upcoming events list -->
  {{block:events-upcoming-list}}

</div>

</body>
</html>

Your Logo Here (Centered)

Check out the landing page here.

<!DOCTYPE html>
<html>

<head>
  <title>AddEvent</title>
  <meta name="Description" content="" />

  <!-- Open graph meta tags -->
  <meta property="og:title" content="{{title}}" />
  <meta property="og:description" content="{{description}}" />
  <meta property="og:image" content="https://cdn.addevent.com/libs/imgs/ogland.png" />

  <!-- Twitter cards -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="" />
  <meta name="twitter:title" content="{{title}}" />
  <meta name="twitter:description" content="{{description}}" />
  <meta name="twitter:image" content="https://cdn.addevent.com/libs/imgs/ogland.png" />

  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width" />
  <meta name="robots" content="noindex, follow" />
  <link rel="canonical" href="https://www.addevent.com/calendar/{{calendar-id}}" />

  <!-- Fonts and stylesheet -->
  <link type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" media="all" />
  <link type="text/css" href="https://cdn.addevent.com/libs/cal/css/calendar.landingpage.v2022.css" rel="stylesheet" media="all" />

  <!-- jQuery + jQuery UI + landing page script (DON'T REMOVE) -->
  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdn.addevent.com/libs/cal/js/calendar.landingpage.v20220801.js"></script>
  <script type="text/javascript" src="https://cdn.addevent.com/libs/general/qrcode.min.js" async defer></script>
  <script type="text/javascript" src="https://cdn.addevent.com/libs/stc/1.0.2/stc.min.js" async defer></script>

  <style>
  /* Image box with background image */
  .img1 {
    width:100%;
    height:110px;
    clear:both;
    margin:30px 0px 0px 0px;
    border-radius:8px;
    background-image:url(https://i.imgur.com/FLq1s7O.png);
    background-repeat:no-repeat;
    background-position:50% -30px;
    background-position: 50% 0px;
    background-size:190px auto;
    }
 </style>
  
  
</head>

<body>
 
  <div class="wrap">
    
      <!-- Image box with background image -->
  <div class="img1"></div>
    <div class="box">
      <div class="pad">

        <!-- Block: Calendar Title -->
        {{block:title}}

        <!-- Block: Upcoming count -->
        {{block:upcoming-01}}

        <!-- Block: Calendar Description -->
        {{block:description}}

        <!-- Warning to let users know that they have visited the page before -->
        <div class="brkbox-t1 hide" id="warning-subscribed-before" data-value="{{user:subscribed}}">
          <div class="bx">
            <p>
              <strong>Please notice!</strong>
              It looks like you might already have subscribed to the calendar.
              It's fine — we just wanted to make you aware of that.
            </p>
            <i class="ico material-icons">warning</i>
          </div>
        </div>

        <!-- User is required to put in info -->
        {{if:is-info-req}}
        {{block:register-button}}
        {{block:register-form}}
        {{endif}}

        <!-- User is not required to put in info -->
        {{if:is-info-not-req}}
        {{block:download-button}}
        {{endif}}

        <!-- Block: Share -->
        {{block:share}}

      </div>

      <!-- About following a calendar -->
      {{block:about}}

    </div>

    <!-- Upcoming events list -->
    {{block:events-upcoming-list}}

  </div>
 
</body>

</html>


Event Templates

Earth Theme

Check out the event landing page here.


<!DOCTYPE html>
<html>

<head>
  <title>AddEvent</title>
  <meta name="Description" content="" />

  <!-- Open graph meta tags -->
  <meta property="og:title" content="{{title}}" />
  <meta property="og:description" content="{{description}}" />
  <meta property="og:image" content="https://cdn.addevent.com/libs/imgs/ogland.png" />

  <!-- Twitter cards -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="" />
  <meta name="twitter:title" content="{{title}}" />
  <meta name="twitter:description" content="{{description}}" />
  <meta name="twitter:image" content="https://cdn.addevent.com/libs/imgs/ogland.png" />

  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width" />
  <meta name="robots" content="noindex, follow" />
  <link rel="canonical" href="https://www.addevent.com/event/{{event-id}}" />

  <!-- Fonts and stylesheet -->
  <link type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" media="all" />
  <link type="text/css" href="https://cdn.addevent.com/libs/evt/css/events.landingpage.v20220801.css" rel="stylesheet" media="all" />

  <!-- jQuery + jQuery UI + landing page script (DON'T REMOVE) -->
  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdn.addevent.com/libs/evt/js/events.landingpage.v20220801.js"></script>
  <script type="text/javascript" src="https://cdn.addevent.com/libs/general/qrcode.min.js" async defer></script>
  <script type="text/javascript" src="https://cdn.addevent.com/libs/atc/1.6.1/atc.min.js" async defer></script>

  <style>
    
    html, body {
      
     background: url('https://i.imgur.com/I7z4r64.jpg');
    }
  </style>
  
</head>

<body>

  <div class="wrap">
    <div class="box">

      <!-- Block: Event Title -->
      {{block:title}}

      <div class="hedwrp-t1">

        <!-- Block: Event Date -->
        {{block:date-01}}

        <!-- Time zone select, print, sharing -->
        <div class="opts">

          <!-- Print option (optional) -->
          <!--
        <div class="opt">
          <div class="print">
            <div class="rel"><i class="material-icons-outlined">print</i></div>
          </div>
        </div>
        -->

          <div class="opt">
            <div class="share">
              <div class="rel"><i class="material-icons-outlined">share</i></div>
            </div>
          </div>

          <!-- Time zone select -->
          {{block:timezone-select}}

        </div>

      </div>

      <!-- Block: Event Description -->
      {{block:description}}

      <!--
    If the event does not require RSVP then display
    the "Add to Calendar" button
    -->

      {{if:is-not-rsvp}}
      {{block:button}}
      {{endif}}

      <!--
    If the event requires RSVP then display the RSVP form
    -->

      <!-- RSVP form disabled notice -->
      {{if:is-rsvp-disabled}}
      {{block:rsvp-disabled}}
      {{endif}}

      <!-- RSVP seat limit reached notice -->
      {{if:is-rsvp-seat-limit-reached}}
      {{block:rsvp-seat-limit-reached}}
      {{endif}}

      <!-- RSVP form -->
      {{if:is-rsvp}}
      {{block:rsvpform}}
      {{endif}}

      <!-- Limited seats available -->
      {{if:is-rsvp-seats-limited}}
      {{block:rsvp-seats-limited}}
      {{endif}}

      <!-- Block: Location -->
      {{if:location}}
      {{block:location-01}}
      {{endif}}

      <!-- Organizer -->
      {{if:organizer}}
      {{block:organizer-01}}
      {{endif}}

      <!-- Block: Share -->
      {{block:share}}

    </div>
  </div>

</body>

</html>

Your Logo Here (Centered)

Check out the landing page here.

<!DOCTYPE html>
<html>

<head>
  <title>AddEvent</title>
  <meta name="Description" content="" />

  <!-- Open graph meta tags -->
  <meta property="og:title" content="{{title}}" />
  <meta property="og:description" content="{{description}}" />
  <meta property="og:image" content="https://cdn.addevent.com/libs/imgs/ogland.png" />

  <!-- Twitter cards -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="" />
  <meta name="twitter:title" content="{{title}}" />
  <meta name="twitter:description" content="{{description}}" />
  <meta name="twitter:image" content="https://cdn.addevent.com/libs/imgs/ogland.png" />

  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width" />
  <meta name="robots" content="noindex, follow" />
  <link rel="canonical" href="https://www.addevent.com/event/{{event-id}}" />

  <!-- Fonts and stylesheet -->
  <link type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" media="all" />
  <link type="text/css" href="https://cdn.addevent.com/libs/evt/css/events.landingpage.v20220801.css" rel="stylesheet" media="all" />

  <!-- jQuery + jQuery UI + landing page script (DON'T REMOVE) -->
  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  <script type="text/javascript" src="https://cdn.addevent.com/libs/evt/js/events.landingpage.v20220801.js"></script>
  <script type="text/javascript" src="https://cdn.addevent.com/libs/general/qrcode.min.js" async defer></script>
  <script type="text/javascript" src="https://cdn.addevent.com/libs/atc/1.6.1/atc.min.js" async defer></script>

  <style>
  /* Image box with background image */
  .img1 {
    width:100%;
    height:110px;
    clear:both;
    margin:30px 0px 0px 0px;
    border-radius:8px;
    background-image:url(https://i.imgur.com/FLq1s7O.png);
    background-repeat:no-repeat;
    background-position:50% -30px;
    background-position: 50% 0px;
    background-size:190px auto;
    }
 </style>
  
  
</head>

<body>
 
  <div class="wrap">
    
      <!-- Image box with background image -->
  <div class="img1"></div>
    
    <div class="box">

      <!-- Block: Event Title -->
      {{block:title}}

      <div class="hedwrp-t1">

        <!-- Block: Event Date -->
        {{block:date-01}}

        <!-- Time zone select, print, sharing -->
        <div class="opts">

          <!-- Print option (optional) -->
          <!--
        <div class="opt">
          <div class="print">
            <div class="rel"><i class="material-icons-outlined">print</i></div>
          </div>
        </div>
        -->

          <div class="opt">
            <div class="share">
              <div class="rel"><i class="material-icons-outlined">share</i></div>
            </div>
          </div>

          <!-- Time zone select -->
          {{block:timezone-select}}

        </div>

      </div>

      <!-- Block: Event Description -->
      {{block:description}}

      <!--
    If the event does not require RSVP then display
    the "Add to Calendar" button
    -->

      {{if:is-not-rsvp}}
      {{block:button}}
      {{endif}}

      <!--
    If the event requires RSVP then display the RSVP form
    -->

      <!-- RSVP form disabled notice -->
      {{if:is-rsvp-disabled}}
      {{block:rsvp-disabled}}
      {{endif}}

      <!-- RSVP seat limit reached notice -->
      {{if:is-rsvp-seat-limit-reached}}
      {{block:rsvp-seat-limit-reached}}
      {{endif}}

      <!-- RSVP form -->
      {{if:is-rsvp}}
      {{block:rsvpform}}
      {{endif}}

      <!-- Limited seats available -->
      {{if:is-rsvp-seats-limited}}
      {{block:rsvp-seats-limited}}
      {{endif}}

      <!-- Block: Location -->
      {{if:location}}
      {{block:location-01}}
      {{endif}}

      <!-- Organizer -->
      {{if:organizer}}
      {{block:organizer-01}}
      {{endif}}

      <!-- Block: Share -->
      {{block:share}}

    </div>
  </div>

</body>

</html>