Web Recorder


The Shout to Me Web Recorder allows you to easily get video and audio shouts from your website visitors.  The Web Recorder works seamlessly on both desktop and mobile web browsers and can be added to your pages in just minutes.

SCROLL DOWN

Web Recorder


The Shout to Me Web Recorder allows you to easily get video and audio shouts from your website visitors.  The Web Recorder works seamlessly on both desktop and mobile web browsers and can be added to your pages in just minutes.

Overview

The Shout to Me Web Recorder Javascript code allows you to make any element on a web page open the Web Recorder when clicked or tapped.  To add the Web Recorder to a page, simply:

  1. Add a link to the Web Recorder Javascript file to the top of the page.
  2. Add a class and a couple of "data-" attributes to the element (a, div, img, etc.) you want to enable.

Adding the web recorder javascript to your website

Before you can make elements on a page open the Web Recorder when clicked or tapped, you must first add the Web Recorder Javascript file to the page's <head> section: 

<script type="text/javascript" src="https://tools.shoutto.me/widgets/v1/recorder.min.js" async></script>

Making an element Show the Web Recorder

Once you've added the Web Recorder Javascript to a page you can make any HTML element on the page show the Web Recorder by:

  1. Adding "s2m-recorder" as a class on the element.  (Note that the element can have other classes too.)
  2. Adding "data-channel-id" as an attribute on the element with a value equal to your Shout to Me channel id.  Please contact Shout to Me support if you don't know your channel id.

For example:

<a href="#" class="s2m-recorder" data-channel-id="s2m-sandbox">Shout to Us!</a>

Additional Customizations

You can add additional data- attributes to your Web Recorder to further customize its behavior:

  • data-max-recording-length
    Defines how long the user is allowed to record for, in seconds.  Set this value only if you want to override your channel's default recording length, usually 60 seconds.
     
  • data-topic
    Sets the shout's topic to this value and prevents Shout to Me's normal natural language processing from automatically determining the topic based on the shout's content.
     
  • data-tags
    Associates one or more tags, separated by commas, to the shout.  Note that additional tags may be associated with the shout via Shout to Me's normal natural language processing.
     
  • data-tos-url
    Defines the URL the terms of service link at the bottom of the Web Recorder links to.  Set this value only if you need to override your channel's default terms of service URL.

For example:

<button class="s2m-recorder"
        data-channel-id="s2m-sandbox"
        data-max-recording-length="20"
        data-topic="my topic"
        data-tags="tag a,tag b"
        data-tos-url="https://mysite.com/contest_tos.html">
  Shout to Us!
</button>

Social Landing Page


When a user clicks a shout shared on social media, they can be taken to a page on your website to play the shared shout.  Shout to Me has a Javascript file you can include on this page to automatically show the shout the user clicked on Twitter or Facebook.

Social Landing Page


When a user clicks a shout shared on social media, they can be taken to a page on your website to play the shared shout.  Shout to Me has a Javascript file you can include on this page to automatically show the shout the user clicked on Twitter or Facebook.

Overview

To create a web page on which social media users will land after clicking a shout:

  1. Add Shout to Me's Shout Embedder Javascript file to the top of the page.
  2. Create an element (e.g., a <div>) on the page in which the shout will be displayed.
  3. Tell Shout to Me the URL of this page.

Once all of this is in place, users who click on a shout in social media will be redirected to this page with a query string parameter (s2m-shout-id) added to the URL.  The Shout Embedder Javascript will use this query string parameter to show the appropriate shout in the element you specified.

Adding the Shout Embedder Javascript to your page

To add the Shout Embedder Javascript to a page, include its Javascript file in the page's <head> section:

<script type="text/javascript" src="https://tools.shoutto.me/widgets/v1/embed-shout.min.js" async></script>

Showing a shout on your page

To display a shout on the page:

  1. Add an element, typically a <div>, where you want the shout to appear.
  2. Add a class of "s2m-shout" to the element.
  3. And the "data-channel-id" attribute to the element and set it to your channel id.  Please contact Shout to Me support if you don't know your channel id.
  4. Using the HTML/CSS of your choice, size the element as desired.  Note that shouts have a 16:9 ratio with additional room, about 32 pixels, added below them to display the shouter's name and when the shout was recorded.

For example:

<div class="s2m-shout"
     data-channel-id="s2m-sandbox"
     style="height: 200px; width: 300px;">
</div>