Periscope

The Periscope card brings live video from Periscope into your article or website. Broadcasts can be shared on Twitter and embedded as Tweets or in timelines. Broadcasters can use the On Air Button to show the world when you’re live, right inside your website.

Embedded Tweets

Everywhere on the web a Tweet can go, Periscope can go, too! When embedding a Tweet with a Periscope broadcast, the full video is included as a card. The Periscope broadcast will update in real-time when the broadcast is live, and viewers can replay the broadcast after it’s ended.

 

Embedding a Periscope broadcast from a Tweet works the same way as embedding any other Tweet. You may copy-and-paste embedded Tweet markup from a Tweet menu on Twitter.com and TweetDeck, via publish.twitter.com, pass a URL to a supporting CMS, or inject a Tweet dynamically using a JavaScript factory function. For more detail, view the documentation for embedded Tweets.

Embedded Timeline

An embedded timeline displays Tweets from a specific Twitter profile, a list, a search query, or a curated collection of Tweets. A full Periscope broadcast will appear for Tweets with links to a Periscope broadcast.

Share your latest Periscope broadcasts with an embedded search timeline. The filter:periscope search operator will restrict search results to Tweets containing a Periscope broadcast, while from:your_name will query just your own Tweets.

Tweets

On Air Button

Similar to the Follow button, the On Air Button lets you include your Periscope broadcaster profile anywhere on the web. The On Air Button displays a broadcaster’s live status and username. The button changes automatically to indicate when you go live!

Clicking the button will open a new window showing the Periscope user’s profile. If the broadcaster is live when visiting the page, their broadcast will automatically start playing.

Embed the On Air Button by visiting periscope.tv/embed, or by programmatically adding it to a page using the JavaScript factory function.

On Air Button JavaScript Factory Function

The Twitter for Websites JavaScript library supports dynamic insertion of the Periscope On Air Button using the twttr.widgets.createPeriscopeOnAirButton function. Pass a Periscope username, target parent element, and any custom options.

The code snippets on this page assume Twitter’s widgets.js has successfully loaded on your page. Include an asynchronous script loader on your page while initializing window.twttr as described in our JavaScript loader documentation. All JavaScript code depending on widgets.js should execute on or after twttr.ready.

Parameter Description Example
username The username of the broadcaster on Periscope. KatmaiNPS
targetEl DOM node of the desired insertion point. document.getElementById('container')
options Override default widget options. Size can be set to ‘large’ or ‘small’ (default). large


Size previews

Large

 

Small (default)

 

Example

An element with a DOM ID of container exists on the page.

  <div id="container"></div>

The code snippet below will insert Periscope user @KatmaiNPS into a page inside an element with a unique ID of container. The options object specifies a large size customization.

  twttr.widgets.createPeriscopeOnAirButton(
  'KatmaiNPS',
  document.getElementById('container'),
  {
    size: 'large'
  }
);

Promises

The twttr.widgets.createPeriscopeOnAirButton function returns a Promise. You can execute code after a widget has been inserted onto your page by passing a callback to the resulting promise’s then function.

  twttr.widgets.createPeriscopeOnAirButton(...)
.then( function( el ) {
  console.log('On Air Button added.');
});