Multi-Registration Setup

This is an overall breakdown of what's needed to set up a Multi-Registration page. The 5 steps below are needed to configure the Multi-Registration Template (Steps 1-4 can be done in any order).

Page Display (Styling, Header, Page Summary, etc.)
Webcast List Display
Standard Form Fields
Custom Form Fields
Upload HTML to Webcast CMS

Step 01: The sections below are samples of the HTML and CSS that will need to be updated in the template. In this step you will be able to update the content for sharing on social media, styling of the page, header image, title and page summary, terms & conditions, links in the footer, and the thank you text that displays in the modal after a successful registration.

Social Sharing Setup

Share your multi-registration page on Social Media by updating the Meta Tags between lines 9-31.
* Please update all meta tags: title, description, image URL, image type, image height, image width, twitter title, twitter description, twitter image

```

```

<meta name="title" content="Multi Registration Template" />

<meta property="og:title" content="Multi Registration Template" />

```
 
```

<meta name="description" content="DESCRIPTION OF PAGE ENDED W/ A PERIOD. "/>

<meta property="og:description" content="DESCRIPTION OF PAGE ENDED W/ A PERIOD. "/>

```
 
```

<meta name="url" content="URL OF MULTI REG PAGE" />

<meta property="og:url" content="URL OF MULTI REG PAGE" />

```
 
```

<link rel="image_src" href="https://::{ContentServerAddress}/customvts/Registration/new-multi-registration-template-no-password/images/CompanyLogo_Header_980x150.png" />

<meta property="og:image" content="https://::{ContentServerAddress}/customvts/Registration/new-multi-registration-template-no-password/images/CompanyLogo_Header_980x150.png" />

<meta property="og:image:type" content="image/png" />

<meta property="og:image:width" content="980" />

<meta property="og:image:height" content="150" />

```
 
```
```

```

<meta name="twitter:title" content="Multi Registration Template" />

<meta name="twitter:description" content="DESCRIPTION OF PAGE ENDED W/ A PERIOD." />

<meta name="twitter:image" content="https://::{ContentServerAddress}/customvts/Registration/new-multi-registration-template-no-password/images/CompanyLogo_Header_980x150.png" />

<meta name="twitter:card" content="summary_large_image" >

```

```
```

```

Styling

Change the colors of the text and/or buttons by updating the CSS between lines 39-114.

```

```
```
<style>
```
```
.button-group .button.is-active,
```
```
.button-group .button.is-active:hover
```
```
{
```

  /*enabled submit button background color*/

```
  background: #3ca0d9;
```
```
}
```
```
 
```
```
.button.primary,
```
```
.button.primary:hover,
```
```
.button.primary:focus
```
```
{
```

  /*enabled submit button color on hover*/

```
  background-color: #3ca0d9;
```
```
  color: #fff !important;
```
```
}
```
```
 
```
```
.button.hollow.primary 
```
```
{
```
```
  /*show speaker button border*/
```
```
  border: 1px solid #3ca0d9;
```
```
}
```
```
 
```
```
.button.disabled.primary:hover,
```
```
.button.disabled.primary:focus,
```
```
.button[disabled].primary:hover,
```
```
.button[disabled].primary:focus
```
```
{
```

  /*submit button styles whilie disabled*/

```
  background-color: #3ca0d9;
```
```
  color: #fff;
```
```
}
```
```
 
```
```
.button-group .button.primary:hover
```
```
{
```

  /*submit button styles when disabled and on hover*/

```
  background: #3ca0d9;
```
```
  color: #fff;
```
```
  border: 1px solid #3ca0d9;
```
```
}
```
```
 
```
```
h4
```
```
{
```
```
  /*show title color*/
```
```
  color: #3ca0d9;
```
```
}
```
```
 
```

.input-control.checkbox input[type="checkbox"]:checked~.check:before,

.input-control.radio input[type="checkbox"]:checked~.check:before,

.input-control.checkbox input[type="radio"]:checked~.check:before,

.input-control.radio input[type="radio"]:checked~.check:before

```
{
```
```
  /*input border color*/
```
```
  border-color: #3ca0d9;
```
```
}
```
```
 
```
```
.switch input:checked~.check
```
```
{
```
```
  /*checkbox check color*/
```
```
  background-color: #3ca0d9;
```
```
}
```
```
 
```
```
.reveal
```
```
{
```
```
  /*modal style patch*/
```
```
  z-index: 99999999;
```
```
}  
```
```
 
```
```
.CardShowImage
```
```
{
```

  /* Show/Hide presentation thumbnail */

```
  display: none;
```
```
}
```
```
</style>
```
```
  
```

Header / Banner Image

Replace the header / banner image by updating the path in the image src on line 125.

```

```

<img class="banner" src="https://::{ContentServerAddress}/customvts/Registration/new-multi-registration-template-no-password/images/CompanyLogo_Header_980x150.png" alt="" />

```

```

Title & Page Summary

Update the title and page summary starting on line 137 (Title) & line 141 (Page Summary).

```
<div class="columns small-12" -->
```
```

```
```
<h2> Multi-Registration Template </h2>
```
```

```
```
</div>
```
```

```

<div class="small-12 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam leo, vulputate ut neque quis, bibendum venenatis elit. Duis scelerisque risus felis. Aliquam commodo neque at leo consequat, sollicitudin facilisis massa finibus. Fusce in facilisis nibh, eu tempus est. Vestibulum sodales lacus orci, sit amet hendrerit ipsum sollicitudin faucibus. Donec eu ex eu arcu ultrices viverra at eu velit. Cras condimentum ultrices bibendum. Nullam in sollicitudin sem, ut mattis urna. Duis hendrerit tincidunt dolor, ut condimentum nisl laoreet eu. Mauris tortor nisi, commodo in risus quis, tincidunt mattis enim. Aliquam at tempor lacus, auctor elementum nisi. Fusce neque ipsum, fringilla quis dolor sit amet, convallis placerat libero. Nunc mollis elit quis eros dapibus, vitae iaculis eros suscipit. Sed vulputate placerat purus, nec ultricies nisi imperdiet suscipit. Donec et pharetra nulla. Maecenas et laoreet purus. Ut condimentum magna eu posuere sodales. Nam imperdiet tincidunt felis non semper. In imperdiet sapien at nibh viverra pulvinar. Maecenas lobortis convallis laoreet.</div>

```

```

Terms & Condition

Below the webcast list / form, there is a terms & condition section that can be updated starting on line 191.

```

```
```
<div class="row">
```
```
<div class="small-12 columns">
```
```
<section class="bottom-text">
```
```
<h5>Terms & Conditions</h5>
```

<!-- THIS COPY WILL APPEAR BETWEEN ABOVE THE FOOTER AND BELOW THE FORM & (EVENT/WEBCAST) LIST AREA -->

<p>Nam molestie scelerisque sapien, ut accumsan turpis euismod a. Vivamus sed mi augue. Fusce lacus magna, commodo ac dictum in, aliquet et lectus. Maecenas est sapien, rhoncus sed mattis vitae, aliquam nec justo. Vestibulum quis aliquam eros, et blandit odio. Nullam scelerisque velit et tortor finibus semper. Curabitur sagittis iaculis diam non mollis. Quisque at sollicitudin est.</p>

```
</section>
```
```
</div>
```
```
</div>
```
```

```

Footer

Update the footer links starting on line 211 as well as the social sharing links starting on line 223.

```

```
```
<footer class="footer text-center">
```
```
<div class="row">
```
```
<div class="columns small-12">
```

<!-- THE YEAR IS GENERATED DYNAMICALLY. ONLY REMOVE IF YOUR CLIENT DOES NOT WANT THIS COPY IN THE FOOTER -->

<a href="" title="">© Copyright <span id="dynamicYear"></span>. All rights reserved.</a>

```
</div>
```
```
</div>
```
```
<div class="row">
```
```
<div class="columns small-12">
```
```

```

<a href="https://www.inxpo.com/privacy/InXpo_Privacy_Policy.pdf" target="_blank">Privacy Policy</a>

<a href="https://presentations.akamaized.net/SharedContent/HTML/Chat_Troubleshooting/Chat_Troubleshooting.htm" target="_blank">Port Troubleshooting</a>

<a href="/Server.nxp?LASCmd=AI:4;F:APIUTILS!10" target="_blank">System Check</a>

<a href="https://presentations.akamaized.net/SharedContent/HTML/VX/TechnicalRequirements.html" target="_blank">Technical Requirements</a>

<a href="https://www.inxpo.com/terms/INXPO_Terms_of_Use.pdf" target="_blank">Terms of Use</a>

<a href="#" target="_blank">Contact Us</a>

```

```
```
<div>
```
```
</div>
```
```
<div class="row">
```
```
<div class="columns small-12">
```
```

```

<a href="https://www.facebook.com/sharer/sharer.php?u=URLGoesHere"><i class="fa fa-facebook" aria-hidden="true"></i></a>

<a href="https://twitter.com/home?status=Tweet%20Goes%20Here"><i class="fa fa-twitter" aria-hidden="true"></i></a>

<a href="https://plus.google.com/share?url=URLGoesHere"><i class="fa fa-google-plus" aria-hidden="true"></i></a>

<a href="https://www.linkedin.com/shareArticle?mini=true&url=URLGOESHERE.com&title=TITLE%20GOES%20HERE&summary=&source="><i class="fa fa-linkedin" aria-hidden="true"></i></a>

```

```
```
</div>
```
```
</div>
```
```
</footer>
```
```

```

Thank You Modal

Update the thank you message that appears after a successful registration starting on line 239.

<!--EDIT MODAL WINDOW (POP-UP SUCCESS MESSAGE) HERE -->

<div class="reveal" id="successModal" data-reveal>

<button class="close-button" data-close aria-label="Close modal" type="button">

<span aria-hidden="true"><i class="fa fa-times-thin fa-2x" aria-hidden="true"></i></span>

```
</button>
```
```
<h4>Thank you for registering!</h4>
```

<p class="lead">In the next few minutes, you should receive a confirmation email with your login information for each event you registered for. If you do not receive a confirmation email in 15 minutes, please email <a href="mailto:eventsupport@inxpo.com"> support </a>.</p>

```
</div>
```

<!-- END EDIT MODAL WINDOW (POP-UP SUCCESS MESSAGE) -->

*Please note: All numbers displayed on the left side of the code are based on the line numbers displayed in the text editor when editing the HTML in the template. The code above is just a visual reference of the templated HTML that should be used as a guide. It is HIGHLY RECOMMENDED to update the code that is within the template.

If there are any questions on configuration of the Multi-Registration Template, send an email to: streaminghelp@notified.com.

To download the latest Multi-Registration Template, click here.