Lenses & ECPs‎ > ‎

Embeddable Event Widgets

WHAT IS THE EMBEDDABLE EVENT WIDGETS?
We developed a widget that displays a single user account's upcoming shows.  The widget will display the next 25 upcoming shows tied to a single user account, then a "View Upcoming Shows" button that links to either the user on DoXYZ or to the ECP's main landing page.  The widget is designed by default to look like the DoXYZ Featured Events widget, but can also be customized with additional CSS.  

For example, http://musicbc.org "Upcoming Shows" section has a DoStuff Embeddable Events Widget that links to shows on the ECP http://events.musicbc.org.  This is the default appearance of the widget.

Another example would be the "Concerts" section of http://www.955klos.com/ which features a more customized version of our widget and links through to the ECP http://events.955klos.com.

HOW CAN THE WIDGET BE USED?
When building the widget, we intended it to be used for either one of the two following situations:
  1. To offer an ECP partner an easy way to display event listings on non-ECP pages of their site.  In this use-case, the event widget will link through to event pages on the ECP.
  2. To offer Metros an alternative to building a full-blown ECP for partners that do not receive enough traffic to be deemed worthy of a full ECP.  In this use-case, the embedded event widget will link through to event pages on DoXYZ.

HOW TO SET ONE UP:
1. LOCATE THE USER ACCOUNT THAT WILL POWER THE WIDGET (or create one if one doesn't already exist)

2. DETERMINE IF YOU SHOULD USE AN ECP OR METRO URL 
a. If you want the widget to link to events on an ECP, you need to give the user account a preference for the ECP, then use the ECP user page URL in step 3.  To give the user preference for an ECP, open the user page in Radmin, under the cog-wheel click "Network Preferences" then "Create New Preference" button in upper right corner.  On the next page, type the ECP's URL into the domain field, type whatever you want the user's ECP vanity URL to be into the Personalized URL field, then click CREATE.

b. If you want the widget to link to events on a Metro, you do not need to create any additional user preferences, just use the DoXYZ user page URL in step 3.

3. ADD THE WIDGET HTML (red text) AROUND THE USER PAGE URL:
<div id="events"></div><script src="https://stuff.dostuffmedia.com/     +     <USER_PAGE_URL>     +     /widget.js?el=events"></script>

Example One: If we want the widget to link through to the ECP events.donnellygroup.ca and be powered by the ECP User events.donnellygroup.ca/featuredevents, then the HTML for the widget would be:
<div id="events"></div><script src="https://stuff.dostuffmedia.com/events.donnellygroup.ca/featuredevents/widget.js?el=events"></script>

Example Two: If we want the widget to link through to Do604 and be powered by the Do604 User do604.com/railway-stage-featured, then the HTML for the widget would be:
<div id="events"></div><script src="https://stuff.dostuffmedia.com/do604.com/railway-stage-featured/widget.js?el=events"></script>

4. ADD THE DEFAULT WIDGET CSS INSIDE <style> TAGS PLACED ABOVE THE WIDGET HTML and YOU'VE GOT YOUR FULL EMBED CODE:
<style>
.ds-home-link a,.ds-featured-venue-events {font-family:inherit;/*add your font family*/}.ds-events-widget {position:relative;text-transform: capitalize;/*uppercase lowercase etc*/}.ds-events-widget::-webkit-scrollbar {display: none;}ol.ds-featured-venue-events {list-style: none !important;}.ds-home-link {position:relative;width:100%;display:block;z-index: 9;}.ds-home-link a {font-family: inherit;font-size: 1rem;width:100%;display:block;text-transform: uppercase;letter-spacing: 0px;font-weight: inherit;font-style: normal;color: #fff;background-color: rgba(28,21,19,.86);border-color: rgba(28,21,19,.86);text-decoration: none;padding: 13px 26px;}.ds-events-widget a {color:#fff !important;}.ds-events-widget ol,.ds-events-widget ul {list-style: none !iimportant;padding:0;margin:0;}li.ds-featured-venue-event {-webkit-border-radius: 0;-moz-border-radius: 0;-ms-border-radius: 0;-o-border-radius: 0;border-radius: 0;background-color: rgba(255,255,255,0.8);margin-top: 1px;z-index: 2;position: relative;margin-left:0;margin-right:0;}.ds-featured-venue-event .ds-cover-image {position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: -1;overflow: hidden;background-repeat: no-repeat;background-size: cover;background-color: #282828;background-position: 50% 50%;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity: 1 !important;}.ds-featured-venue-event .ds-cover-image:after {background: #000 !important;opacity: .5 !important;bottom: 0;content: "";left: 0;position: absolute;right: 0;top: 0;}.ds-featured-venue-event:hover .ds-cover-image:after {opacity:0.2 !important;}.ds-featured-venue-event a {padding: 35px 25px 35px 62px;display: block;color: #ffffff;text-decoration: none;}.ds-featured-venue-event .ds-event-date {position: absolute;top: 35px;left: 15px;}.ds-featured-venue-event .ds-event-date .ds-day,.ds-featured-venue-event .ds-event-date .ds-month {display: block;text-align: center;}.ds-featured-venue-event .ds-event-date .ds-day {vertical-align: text-top;font-size: 28px;line-height: 28px;font-family: inherit;font-style: normal;font-weight: 700;-webkit-font-smoothing: antialiased;}.ds-featured-venue-event .ds-event-meta {line-height: 1rem;}.ds-featured-venue-event .ds-event-meta .ds-title {vertical-align: text-top;font-size: 18px;line-height: 24px;display: block;margin-bottom: 5px;margin-bottom: 0.3rem;}.ds-featured-venue-event .ds-event-meta .ds-time,.ds-featured-venue-event .ds-event-meta .ds-extra {font-size: 16px;line-height: 16px;margin-right: 10px;}
</style>
<div id="events"></div><script src="https://stuff.dostuffmedia.com/events.donnellygroup.ca/featuredevents/widget.js?el=events"></script>



ADVANCED CSS OPTIONS:
1. DISPLAYING ONLY A CERTAIN NUMBER OF SHOWS:
By default, the widget will show the next 25 upcoming shows voted on by the user.  However, we can force the widget to only show a certain number of events by using the following CSS trick:

/*this hides all of the 25 events*/
.ds-featured-venue-event {
    display:none;
  }
/*but then this unhides the first, second, third, fourth and fifth events*/
  .ds-featured-venue-event:nth-child(1),
.ds-featured-venue-event:nth-child(2),
.ds-featured-venue-event:nth-child(3),
.ds-featured-venue-event:nth-child(4),
.ds-featured-venue-event:nth-child(5) {
display:block;
}

Add that CSS to the end of your embed code's custom CSS and the widget will only show 5 events, then the View Upcoming Shows button.  To show 10 events, your CSS would be:
.ds-featured-venue-event {
    display:none;
  }
.ds-featured-venue-event:nth-child(1),
.ds-featured-venue-event:nth-child(2),
.ds-featured-venue-event:nth-child(3),
.ds-featured-venue-event:nth-child(4),
.ds-featured-venue-event:nth-child(5),
.ds-featured-venue-event:nth-child(6),
.ds-featured-venue-event:nth-child(7),
.ds-featured-venue-event:nth-child(8),
.ds-featured-venue-event:nth-child(9),
.ds-featured-venue-event:nth-child(10) {
display:block;
}
 

2. APPLYING A DIFFERENT WIDGET STYLE:
We've developed custom widget designs for certain partners at their request.  You are free to copy the CSS from any of these examples, then use that CSS in place of the default widget CSS to achieve the alternate design/layout.  
Are the above examples still not quite the custom design you're looking for?  Give us a shout and we'll help you write custom CSS to achieve the desired design..


Comments