Swellcast Widget: Documentation

Embedding the Swellcast Widget

You can easily embed your Swellcast on your website with 2 simple steps:

1. Insert the Swellcast container <div> where you want your Swellcast to appear on your website:

<div class="swell-widget" data-username="{USER_NAME}" style="height:80vh;"></div>

2. Add the Swell script tag towards the bottom of your website’s <body> tag:

<script src="https://www.swellcast.com/SwellWidget.js"></script>

How Do I Get My Username?

Your Swell username is your account's name. It appears in the header of your Swellcast just below your thumbnail.

How Do I Get the Swell ID?

The easiest way to get your Swell ID is to use the Quick Start guide to select your username, and then choose the Swell conversation from the drop-down of conversations. The Swell ID will be automatically selected. If you need to manually find the ID, you will find it in the URL at http://www.swellcast.com. It is the string of characters after the alias. For example, at https://www.swellcast.com/daily/71c8b45c-ad8a-44b2-b71b-18bf1bc010d7, the Swell ID is 71c8b45c-ad8a-44b2-b71b-18bf1bc010d7.

Styling

The Swellcast widget will fill its parent container <div>. You can add styling to the container <div> to match the style of your website. For example you can add a border:

<div class="swell-widget" data-username="{USER_NAME}" style="border:1 px solid #CCC; height:80vh;"></div>

…or a drop-shadow:

<div class="swell-widget" data-username="{USER_NAME}" style="box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15); height:80vh;"></div>

If you are using Twitter bootstrap, it’s even easier to add these styles:

<div class="swell-widget border shadow" data-username="{USER_NAME}" style="height:80vh;"></div>

It is important to set the height of the container <div>. We recommend a height based on the viewport: “80vh”. This allows the widget’s internal scrolling to fit within the screen and also shows that there is more content available on the page. Note that the widget’s internal styling cannot be altered.

Responsive Styling

The Swellcast widget works well on desktop and mobile. On desktop, the optimal width should be between 420px and 640px. On mobile, we recommend allowing the width to be 100%. Here’s an example using Twitter Bootstrap that splits the website layout into 2 columns for desktop and a single column for mobile:

<div class="container">
  <div class="row">
    <div class="col-12 col-lg-4">
      <!-- left column containing Swell widget -->
      <div class="swell-widget shadow" data-username="{USER_NAME}" style="height:80vh;"></div>
    </div>
    <div class="col-12 col-lg-8">
      <!-- right column containing your content -->
      ...
    </div>
  </div>
</div>

<script src="https://www.swellcast.com/SwellWidget.js"></script>

Generating the Code

Use this tool to automatically generate the code required.

What Can the Widget Do?

The Swellcast widget shows your latest Swells as they would appear on your Swell homepage. When your visitors click one of these, a new window will open and play the Swell conversation on Swellcast.com. The visitor is then given the ability to download the app and explore all your content.

What Can’t the Widget Do?

The widget does not have any interactive features such as reactions, sharing, and following. The best place to do all of the is in the Swell app, so we’ve focused on getting your users to the app as efficiently as possible after showing them the Swell audio experience.

What is the Difference Between Embedding a Swellcast or Station and Embedding a Single Swell Using the Widget?

When you embed a Swellcast or Station, the widget will show a list of all the Swells you have posted to that Swellcast. The widget also shows the profile header of the Swellcast or Station. When you embed a Swell, only that specific post is shown in the widget.

Can I Embed Multiple Widgets on My Website?

We’re glad you asked! Yes, you can. Just add multiple container <div>'s in your HTML. Note that you only need to add the Swell <script> once:

<div class="container">
  <div class="row">
    <div class="col-12 col-lg-4">
      <!-- first swellcast -->
      <div class="swell-widget shadow" data-username="{FIRST_USER_NAME}" style="height:80vh;"></div>
    </div>
    <div class="col-12 col-lg-4">
      <!-- second swellcast -->
      <div class="swell-widget shadow" data-username="{SECOND_USER_NAME}" style="height:80vh;"></div>
    </div>
  </div>
</div>

<script src="https://www.swellcast.com/SwellWidget.js"></script>

Help Me!

If you are having any issues with the Swellcast widget, please contact us at this link: https://swell.life/contact. We are happy to help!