Swellcast Widget: 3rd Party Integration

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://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.

Styling

The Swellcast widget will fill it's 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 can not 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://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 users clicks one of these, a new window will open and play the Swell conversation on Swellcast.com. The user 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.

Can I Show Multiple Swellcasts 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://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!

© 2020 Anecure, Inc. All Rights Reserved.