Lanyrd Badge Documentation

Contents

  1. Introduction
  2. Top Bar
  3. Content Splat
  4. Performance notes
  5. Glossary of configuration classes

Introduction

Lanyrd personal badges enable you to display information about the conferences you are speaking at, attending, involved with or tracking on your own website.

We have designed the badges to be as configurable as possible while providing some default styles for you to use if you want.

There are two styles of badge, the top bar and the content splat. We will go over those in more detail in a moment.

You need to do two things in order for the badge to work:

  1. Include this script tag somewhere in your document. We suggest either adding it to the <head> section or placing it directly before your closing </body> tag.

    <script src="http://cdn.lanyrd.net/badges/person-v1.min.js"></script>

  2. Include a configuration link to your Lanyrd profile somewhere on your page. This tells us your username and can be further configured with class names to control how you want your badge or badges to look. For example:

    <a href="http://lanyrd.com/profile/YOUR-USERNAME/" class="lanyrd-topbar" rel="me">See my conferences on Lanyrd</a>

Our examples all make use of the rel=me microformat — this is not required for the badges to function.

Top Bar

I'm going to Conference Name on 29th September to 1st October 2010 in Place, Country

To include the top bar badge on your site, you need to have the class "lanyrd-topbar" on the link to your lanyrd profile.

The default behaviour for the top bar is to insert itself at the top of the document, directly inside the body element. If you want the bar to be inserted elsewhere, add an ID of lanyrd-target-topbar to the desired parent element on the page.

You can also configure the script to remove the configuration link from your document by including the class lanyrd-nolink. Remember you can have as many class names on the link as you like, separated by spaces. For example:

<a href="http://lanyrd.com/profile/YOUR-USERNAME/" class="lanyrd-topbar lanyrd-nolink" rel="me">See my conferences on Lanyrd</a>

With just those two classnames on the link the behaviour will be to display the next conference you are attending or speaking at, all microformatted up using vevent of course. If you aren't attending any future events the bar will look like this:

If you would like the top bar badge to not appear at all if you don't have any future conferences scheduled then include the class lanyrd-noblank. For example:

<a href="http://lanyrd.com/profile/YOUR-USERNAME/" class="lanyrd-topbar lanyrd-noblank" rel="me">See my conferences on Lanyrd</a>

If you would like the top bar badge to only show upcoming conferences that you are involved with or speaking at you can add the classes lanyrd-type-speaking or lanyrd-type-involved

For example, the speaking badge would look as follows:

<a href="http://lanyrd.com/profile/YOUR-USERNAME/" class="lanyrd-topbar lanyrd-type-speaking" rel="me">See my conferences on Lanyrd</a>

See me speak at Conference Name on 29th September to 1st October 2010 in Place, Country

To generate the badge for conferences you are involved with:

<a href="http://lanyrd.com/profile/YOUR-USERNAME/" class="lanyrd-topbar lanyrd-type-involved" rel="me">See my conferences on Lanyrd</a>

Please note, in the following example roleName would be replaced with your assigned role from the conference on Lanyrd. For example: Organiser, Volunteer, Co-chair, Program chair etc.

I'm involved with Conference Name (roleName) on 29th September to 1st October 2010 in Place, Country

As with the example for your speaking engagements, you can combine lanyrd-type-attending or lanyrd-type-involved with lanyrd-noblank if you want the bar to not appear if there are no upcoming relevant events.

Should you wish, you can also display the next event you are tracking by using the class name lanyrd-type-tracking, the text would then read "I'm tracking …" before the event details as in the previous examples

You can also display the next event you are speaking at, involved with, attending or tracking by using the class lanyrd-type-all. The text of the badge will change depending on the type of event that is next up, for example if the next event is one you are attending but not speaking at or involved with then the text will read "I'm going to…" if you are speaking at it then it will read "See me speak at…" etc.

The default style for the top bar uses whatever body base font and text size that you have specified for your site. The background is a very classy black and the text is white.

We have also devised some very stylish themes for you to use. To use a theme, add the class for the theme to your configuration link. For example:

<a href="http://lanyrd.com/profile/YOUR-USERNAME/" class="lanyrd-topbar lanyrd-theme-sunrise" rel="me">See my conferences on Lanyrd</a>

Current themes include the following (examples below):

  • Sunrise lanyrd-theme-sunrise
  • Forest lanyrd-theme-forest
  • Ocean lanyrd-theme-ocean
  • Mountain lanyrd-theme-mountain
  • Meadow lanyrd-theme-meadow
  • Desert lanyrd-theme-desert
  • Rainbow lanyrd-theme-rainbow
  • Terminal lanyrd-theme-terminal
  • City lanyrd-theme-city
  • Farm lanyrd-theme-farm
  • Village lanyrd-theme-village
  • Snow lanyrd-theme-snow
  • Surprise! lanyrd-theme-omg

To create your own theme we recommend you add a class to your configuration link of lanyrd-theme-yourownthemenamehere, we will then add that as a class to the top bar and you can use this in your own stylesheet together with the id lanyrd-topbar (*please see authors note), #lanyrd-topbar.lanyrd-theme-yourownthemenamehere to set your styles. The specificity of our styles should be loose enough that you can override them in your own stylesheet should you wish to customise them.

See me speak at Conference Name on 29th September to 1st October 2010 in Place, Country

See me speak at Conference Name on 29th September to 1st October 2010 in Place, Country

See me speak at Conference Name on 29th September to 1st October 2010 in Place, Country

See me speak at Conference Name on 29th September to 1st October 2010 in Place, Country

See me speak at Conference Name on 29th September to 1st October 2010 in Place, Country

See me speak at Conference Name on 29th September to 1st October 2010 in Place, Country

See me speak at Conference Name on 29th September to 1st October 2010 in Place, Country

See me speak at Conference Name on 29th September to 1st October 2010 in Place, Country

See me speak at Conference Name on 29th September to 1st October 2010 in Place, Country

See me speak at Conference Name on 29th September to 1st October 2010 in Place, Country

See me speak at Conference Name on 29th September to 1st October 2010 in Place, Country

See me speak at Conference Name on 29th September to 1st October 2010 in Place, Country

See me speak at Conference Name on 29th September to 1st October 2010 in Place, Country

Content Splat

Content splat badges are for pulling out conference listing information from Lanyrd about events you are speaking at, attending, organising or tracking into your site. They have fewer default styles than the top bar has, and no themes, so they should fit nicely into the design of your site.

To embed a content splat badge you need to include the JavaScript file as mentioned above, then add the following HTML at the position you would like the Lanyrd content to appear:

<div class="lanyrd-target-splat"><a href="http://lanyrd.com/profile/YOUR-USERNAME/" class="lanyrd-splat" rel="me">See my conferences on Lanyrd</a></div>

You only need to include the JavaScript file once no matter how many badges you embed in the page.

The default behaviour of the content splat is to display up to 3 of the upcoming conferences that you are speaking at, with the full name of the conference, the location, the country with flag and the date. By default this will be output wherever you have the lanyrd-splat configuration link.

There are several configuration options possible for the content splat, the template you use sets what level of detail to show for the listing, the number of conferences to show, the context: past or future, and the type: attending or speaking etc.

Template

Compact

The compact template outputs the minimum information, the conference name and the dates. It is identical to the mini template but is output on one line per event and with no heading levels. The heading-start class name would be ignored.

To activate the compact template, add the class lanyrd-template-compact to your configuration link.

For example:

  1. Conference Name 113th September 2010

  2. Conference Name 214th September 2010

  3. Conference Name 315th September 2010

Mini

The mini template outputs the minimum information, the conference name and the dates.

To activate the mini template, add the class lanyrd-template-mini to your configuration link.

For example:

  1. Conference Name 1

    13th September 2010

  2. Conference Name 2

    14th September 2010

  3. Conference Name 3

    15th September 2010

Standard

This is the default template, it outputs the conference name, the dates, its location, the country and the flag for that country.

To activate the standard template, you could add the class lanyrd-template-standard to your configuration link. however this is the default template for the content splat badge.

For example:

  1. Conference Name 1

    United KingdomUnited Kingdom / London

    13th September 2010

  2. Conference Name 2

    United KingdomUnited Kingdom / London

    14th September 2010

  3. Conference Name 3

    United KingdomUnited Kingdom / London

    15th September 2010

Detailed

This the template that outputs extra information for the conference, the view is as the default standard template above but if you are involved with a conference it will output your role, and if you are speaking at the conference and have been assigned to a session, it will output the session title.

If you are using the content splat badge for conferences you are attending or tracking, there is no difference between this template and the default.

To activate the detailed template, add the class lanyrd-template-detailed to your configuration link.

For example:

Type

You can customise the types of event you would like to appear by using the following classes:

  • lanyrd-type-speaking — Conferences that you are speaking at. This is the default state
  • lanyrd-type-involved — Conferences that you are involved with.
  • lanyrd-type-attending — Conferences that you are attending.
  • lanyrd-type-tracking — Conferences that you are tracking.

You can also display the next events you are speaking at, involved with, attending or tracking by using the class lanyrd-type-all.

Number of conferences to show

The default number of conferences to show is three. If you would like to display more, you can use a lanyrd-number- class such as the following:

  • lanyrd-number-1
  • lanyrd-number-5
  • lanyrd-number-30

The lanyrd-context-past badge will show the most recent event at the top of the list, while the lanyrd-context-future badge will show the next upcoming event at the top.

Context

Use the context classnames lanyrd-context-past lanyrd-context-future or lanyrd-context-all to set whether the content splat badge displays past, future or all events of the type you have set. Future events include ones that are happening right now

Further customisations

By default, splats include microformat classes (vevent, summary etc). If you don't want those classes to be included due to them clashing with your other site styles you can disable them using lanyrd-nomicroformats.

Performance notes

The initial person-v1.min.js script is 2215 bytes, and is served from our Amazon CloudFront CDN. It should load extremely quickly, and won't block the loading of your page even if Lanyrd.com itself is unavailable.

That script than makes a single second call to Lanyrd to retrieve all of the necessary data, no matter how many different badges you have on the page. This call is handled by our Varnish cache server, so again it should be very fast.

Badge responses are cached for 10 minutes, so it may take up to 10 minutes for a new conference you are tracking or attending to show up on your page.

If Lanyrd is unavailable your page load time will be unaffected — the badges will simply fail to appear.

Glossary of configuration classes

Badge styles

lanyrd-topbar Generates a top bar with the default behaviour being to display a black bar showing the next conference you are attending. If you are not attending any events in the future it will display the text "See my conferences on Lanyrd" and will link through to your Lanyrd profile.
lanyrd-splat Outputs by default up to three of the upcoming conferences that you are attending, with the full name of the conference, the location, the country with flag and the date. This will be output wherever you have the configuration target (the element with the lanyrd-target-splat class).

Type of conferences to output

These options all work for both the top bar and the content splat

lanyrd-type-speaking Conferences that you are speaking at.
lanyrd-type-involved Conferences that you are involved with.
lanyrd-type-attending Conferences that you are attending, including those you are speaking at or are involved with. This is the default state for both badges.
lanyrd-type-tracking Conferences that you are tracking.
lanyrd-type-all Conferences that you are speaking at, involved with, attending or tracking.

Content splat template

These only affect the content splat.

lanyrd-template-compact The compact template outputs the minimum information, the conference name and the dates. It is identical to the mini template except the information is one line.
lanyrd-template-mini The mini template outputs the minimum information, the conference name and the dates.
lanyrd-template-standard This is the default template, it outputs the conference name, the dates, its location, the country and the flag for that country.
lanyrd-template-detailed This the template that outputs extra information for the conference, the view is as the default standard template above but if you are involved with a conference it will output your role, and if you are speaking at the conference and have been assigned to a session, it will output the session title.

Number of conferences to output

These only work for the content splat. The maximum allowed number is 30. The default is 3.

lanyrd-number-7 Displays seven of the relevant events in a listing. If the context is future, it displays upcoming events. If the context is past it displays the most recent past events.

Context

These should only be used with the content splat.

lanyrd-context-past Display past events rather than upcoming events.
lanyrd-context-future This is the default state and will display upcoming and current events.
lanyrd-context-all Display both past and future events.

Special states

lanyrd-nolink This works for both the content splat and the top bar. The default state is to leave the configuration link in the page where it is. Adding this class to the configuration link will remove it once the badge has been generated.
lanyrd-noblank This is only useful for the top bar. If you have no upcoming relevant conferences the bar will still show with a link to your lanyrd profile unless you provide this class on the configuration link.
lanyrd-nostyles Don't load any CSS from Lanyrd. Use this if you want to use entirely your own CSS without needing to override the Lanyrd defaults.
lanyrd-nomicroformats This will remove the microformats classes from the content splat. You should only use this if they are interfering with existing styles that you have already applied to your page.
lanyrd-headingstart-h2 Only works for the content splat badge. This tells the badge to start the heading levels at h2. The default if left unset is to have the conference names as h3.
lanyrd-headingstart-h3 Only works for the content splat badge. This tells the badge to start the heading levels at h3. This is the default state.
lanyrd-headingstart-h4 Only works for the content splat badge. This tells the badge to start the heading levels at h4. The default if left unset is to have the conference names as h3.
lanyrd-headingstart-h5 Only works for the content splat badge. This tells the badge to start the heading levels at h5. The default if left unset is to have the conference names as h3.
lanyrd-headingstart-h6 Only works for the content splat badge. This tells the badge to start the heading levels at h6. The default if left unset is to have the conference names as h3.

* authors note: This demonstration page is invalid html because it has more than one id 'lanyrd-topbar' on the page. It does this purely to demonstrate the different ways in which it can appear. If you include the top bar code on your page, you will never get more than one top bar.