Add LiveWhale Calendar widgets to your WCMS website

You can create widgets in LiveWhale Calendar, and then use the IU Web Framework to add them to a website created with IU's Web Content Management System (WCMS):

1. Create a new widget in LiveWhale Calendar:
   1. From the Widgets tab, select Add a new widget.
   2. Enter a unique name for your widget in the "Enter a name for this widget" field.
   3. Scroll to the bottom of the page, and then use the "Import widget args from template" drop-down to select IU Web Framework.
   4. Click Save this Widget.
2. Add IU Web Framework feed markup to your widget:
   1. In the "HTML format for each item in widget" section, make sure the "Widget markup style" drop-down is set to Standard LiveWhale markup.
   2. Copy the markup below for the type of feed you want, and then paste it into the "HTML format for each item in widget" field:
      • For a standard feed, copy and paste:

        <figure class="media image">
           {image}
        </figure>
        
        <div class="content" data-eventtype="standard" data-eventtitle="{title}" data-datetime="{datetime}">
           <h2 class="title">{title}</h2>
           <p class="meta date">{date}</p>
           <p>{description}</p>
        </div>

      • For a summary feed, copy and paste:

        <div class="feed-item--small">
         <div class="date-cube">
           {cal_date}
         </div>
         
         <div class="content" data-eventtype="summary" data-eventtitle="{title}" data-datetime="{datetime}">
             <p class="title">
                 {title}
             </p>
             <p class="meta time">
               {time}
             </p>
         </div>
        </div>

      • For a ticker feed, copy and paste:

        <div class="date-cube">
           {cal_date}
        </div>
        
        <div class="content" data-eventtype="ticker" data-eventtitle="{title}" data-datetime="{datetime}" data-starttime="{start_time}">
           <p class="title">
               {title}
           </p>
        </div>

        Also, copy the following markup and paste it into the "Wrap widget output with markup?" field:

        <div class="ticker-section">
            {widget}
        </div>

   3. Click Save this widget.
3. Use the widget syntax LiveWhale Calendar generates to add your widget to your WCMS web page:
   1. Open your widget, and then, near the bottom right of the page, in the "Embed widget syntax" section, copy the widget syntax, which will look similar to this (xx represents your widget's unique ID):

      <div class="lwcw" data-options="id=xx&format=html"></div>
      <script type="text/javascript" id="lw_lwcw" src="//events.iu.edu/livewhale/theme/core/scripts/lwcw.js"></script>

   2. In the IU Web Framework, paste your widget syntax it into a code chunk on the web page where you want the widget to display, and then:
      • Add https: to the beginning of the URL in the src attribute.
      • Replace any & characters with &.
      Note:

      To add more than one unique widget to a page, paste only the <div class="lwcw" ... </div> portion for each widget into the code chunk, and paste the <script type="text/javascript" ...</script> syntax into a JS-PAGE block. If you include the provided script syntax more than once on a page, your widgets will not load properly.

      UITS recommends that you do not include the same widget more than once on a page.