Follow

Event Content

Account Administrators can access this feature.
 Available in the Peer Networking, Mixed Networking, Open House, and Expo event types.
 Content blocks allow you to customize the sidebar of your event lobby. There are three different ways to add content:

  1. Welcome Video: plays automatically to greet event participants the first time they login, and is stored in the sidebar of lobby for easy access thereafter.
  2. Video: embed additional videos into events with a link.
  3. Content Block: add links, rich text, and advanced content like SlideShare and Webframes into your event (below)

Event_Content.png

To add content to your event sidebar

  1. Navigate to the Settings of your event, then select Event Content.
  2. Click Add to open a modal to select the type of content you want to add. 
  3. Follow the on screen instructions to add content and click save. 

Settings_Event_Content.png 

Content blocks are fully HTML5 optimized. You can add code to create whatever content you wish inside the event lobby’s sidebar. Ex:

Settings_Live_Event_Content.png

 

  • Learn to embed any of the following types of content into your content blocks to flesh out your Brazen session:
  1. Text and links
  2. Images
  3. Videos/Slideshare
  4. Web Frames
  5. Dropdown Lists
  • Use the following links to make the most of your content blocks from a functional and aesthetic perspective:
  1. Formatting
  2. Suggested Use

 

  • Text and links can be added easily using the text editor.

 Content_Block.png

    • Result:

 

 

 

  • Images: To add an image, click the image button in the Content Block editor. You'll need to insert the weblink where the image is hosted, and specify dimensions. The width and height elements determine the size of the image in number of pixels. We recommend having these between 220-250 pixels in size to fit the content blocks. You can also embed an image by clicking the "< >" (source code) on the Content Block editor.

 

    • Embedded Image: <img src="Source Link" alt="Image Description" style="width:100%;height:100%;">
    • Ex: Code: <img src="http://vignette3.wikia.nocookie.net/jspotter/images/1/18/Hogwarts_Crest_1.png/revision/latest?cb=20140720035204" alt="Hogwarts Crest" style="width:100%;height:100%;">

Insert_an_image.png

Insert_an_image_link.png 

  

  • Video/Slideshare: You can embed a video/slideshare from any source using their “embed” code provided on the site. Video can be a live stream or pre-recorded. Embed by clicking the "< >" (source code) option on the content block editor.Example code for a youtube video listed below:
    • Ex: Code: <div style="text-align:center"><iframe style="overflow:hidden;max-width:100%" height="220" src="https://www.youtube.com/embed/ZueFVicekIE" frameborder="0" allowfullscreen></iframe></div>
    • The <iframe> element is the embedded youtube video, the <div style="text-align:center"> ensures that the video stays in the center of the content block no matter how the window is stretched. The style="overflow:hidden;max-width:100%" ensures that the video/slide will scale down with a shrinking window negating overflow out of the content block.
    • Result:

 

  

  • Web Frames: You can open a window to another website such as google maps to show a specific location. Embed by clicking the "< >" (source code) option on the content block editor by using the following code:
    • iFrame: <div style="text-align:center"><iframe style="overflow:hidden;max-width:100%" height="220" src="Source Link"></iframe> (Pixel size depends on the size of your screen.)</div>
    • Many sites such as Google Maps will allow you to pull the embed code directly from the page itself.
    • Ex: Code: <div style="text-align:center"><iframe style="overflow:hidden;max-width:100%" height="220" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1689.3333801389067!2d-77.08661699643905!3d38.89305312453!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b66226edf9e1%3A0x25a94899a1ad924c!2s2107+Wilson+Blvd%2C+Arlington%2C+VA+22201!5e0!3m2!1sen!2sus!4v1456780573061"></iframe></div>
    • Result:

 

 

 

  • Dropdown Lists: The following code creates a dropdown list that allows you to select a booth based by location.Embed by clicking the "< >" (source code) option on the content block editor. The language can be adjusted to fit whatever category you would like the booths to be grouped by, but ultimately allows easier access to finding booths:
    • Ex: Code:

<p> Booths by Location</p>

<select onchange="if(this.value!=''){window.location.href='#!booth;eventCode=Event Code;boothCode=' + this.value}">

<option value="">----SELECT ONE----</option>

 

<optgroup label="----Location One----">

<option value="Booth Code">Booth Title</option>

 

<optgroup label="----Location Two----">

<option value="birmingham">Birmingham City Schools</option>

 

<optgroup label="----Location Three----">

<option value="anchorage">Anchorage School District</option>

<option value="madison">Madison Elementary School District</option>

Etc.

</select>

Result:

 

In this example, the locations given were states each booth’s school/org was located in, the booth code followed by the booth name allows the code to link the selection to the booth and allowed participants to choose a school based on their location.

 

 

 

  • Formatting: To make sure that your content - particularly images and videos - react consistently with a dynamic window, these simple CSS tags can be added to your code to ensure that, regardless of window size, your content will fit the page in an aesthetically pleasing manner by staying aligned with the rest of your page. 
    • Code:<div id="wrapper">
      <img style="display:block; width:100%; border: 1px solid #ccc; border-radius: 4px;" src="Image/Video Link" alt="Image Description">
      </div>
    • The display, border, and border-radius can all be made thicker by increasing the pixel count. By making the width 100%, we're guaranteeing that the image/video will show in its entirety regardless of the window size.

 

 

  • Suggested Use:
    • Networking: Create a list of upcoming events with dates/links/information embedded into the block. Add scrolling text to bring attention to features.
    • Open House: Create a list of sponsors’ logos, a block of future events, and a list of links to other job-related, company materials.
    • Expo: Build a banner with participating organizations’ logos, list off future events in a block that links to the event page, link to interview and chat tools.

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments