Share on Remind: Remind Share SDK

Overview

Implement the Remind Share SDK to leverage the messaging reach of Remind to distribute content and other resources. The Share SDK allows you to embed the Remind composer in your product, enabling your users to send content through Remind.

Use cases

• Distribution of content, resources, and links
  Teachers can easily share your content with parents and students in their classes.
• User engagement
  Remind message notifications provide an easy path back to your app.

Features

The Share SDK includes the following features:

• Remind embedded composer
  The embedded composer enables users to compose and send Remind messages directly from your site. You can pre-populate message content for your users.
• Remind Share button
  The share button opens the composer in a new window where users can compose and send Remind messages to their classes.

Getting started with the web SDK

Include the Remind SDK JavaScript library on each page where you would like the Remind embedded composer or the share button to appear.

Setting up the Remind Share SDK

In order to use the Remind Share SDK you will need to register your domain name and product name with Remind, and you will need a partner-specific uuid. These will be used in the fields ‘uuid-provided-to-you-by-remind’ and ‘your-product-name’ as seen in the JavaScript snippet below.

Please reach out to partners@remind.com from a verified account owner with the following:

1. Your product name
2. The domain you will be serving the ShareSDK from in a serialized domain format ( *.example.com).

Remind will notify you with your uuid upon receipt of the above information.

Including the Remind JavaScript library

Add the following snippet to each page to include the Remind SDK JavaScript library.

<script>
 window._remindAsyncInit = () => {
   // once init is called all of the components with ids will be initialized
   // either the share on remind button or the iframe composer!

   // feel free to call init when you want to in order to initialize the components
   // on your own time.
   window.remind.init({
     name: 'your-product-name',
     id: 'uuid-provided-to-you-by-remind'
   });

   remind.onComposerEvent(event => {
     switch(event) {
       case 'message_sent_done': {
         console.log('got the message sent done!!!!');
       }
     }
   });
 };

 (function(d, s, id) {
   var js, rjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) return;
   js = d.createElement(s); js.id = id;
   js.src = 'https://js.remind.com/v1/remind.js';
   rjs.parentNode.insertBefore(js, rjs);
 })(document, 'script', 'remind-websdk');
</script>

The Remind SDK will always look for the _remindAsyncInit() function in order to initialize. You will need to call remind.init() on your own if you choose not to use _remindAsyncInit().

Remind brand guidelines

Remind maintains brand guidelines for partners integrating our SDKs and APIs. Please refer to these for style, design, and branding guidance.

Embedded composer implementation

Remind embedded composer, logged out.

The Remind Share SDK embedded composer can be added directly to your existing web application. To insert the embedded composer, create a div and give it the id remind-composer-iframe. The Remind Share SDK will locate this div and insert the Remind composer into the element as an iframe component.

<div id="remind-composer-iframe"  data-text="test message!"></div>

Embed the composer inside of a modal dialogue within your application that can close itself. We leave it up to you to show and hide the composer when appropriate.

If the composer is being shown from a button, please refer to the Remind brand guidelines.

Confirming a message send

You can listen to composer events by using the remind.onComposerEvent() method of the Share SDK.

We will send the message_sent_done event to the listening event handler once the user successfully sends a message and clicks the done button.

When you receive the event, hide the div containing the Remind embedded composer.

remind.onComposerEvent(event => {
  switch(event) {
    case 'message_sent_done': {
      /* your code here to perform actions after a
        message is successfully sent */
    }
  }
});

Share button implementation

The Remind Share button can be added to your application. Clicking on the button will launch a new window with the Remind composer. To pre-populate message content in the composer, you must set data-body before the end user clicks the button.

The Remind Share SDK will populate the following elements when remind.Init() is called.

<div
  class="remind-composer-button"
  data-body="hello"
  data-body-url="www.remind.com/exampleLink"
  data-text="Share on Remind"
  data-theme="dark"
  data-size="medium">
</div>

Follow the Remind brand guidelines if you decide to change any of the inner CSS of the button once it’s created. The references section includes the options available for specifying the theme/size of the button.

Remind Share SDK reference

Methods for the Remind embedded composer

init({id, name})

Used to initialize the API.

This will also be where the Share SDK will fill in the div.remind-composer-button ‘Share on Remind’ button.

onComposerEvent((event) => {})

Listener for the Remind embedded composer. Note: this event is only available for the embedded composer; it is not supported with the Share Button.

Currently, the event can only be the following string: 'Message_sent_done'

Note: This event is sent when the end user clicks ‘Done’ after sending a message. Use this to close the iframe.

renderComposer(Element, {body})

Inserts an iframed version of the Remind composer into the specified element. It will be pre-populated with what you pass into body.

Share button configuration

data-theme

Options
dark		Default
light

data-size

data-body

Sets the text of the composer once it’s launched. Use this field to set any content the user wants to share via Remind.

data-body-url

This implicity sets the url your content will link to at the end of the message. Image previews will be generated for your content in the composer.

data-text

Sets the text of the button.

Only set this if you need to translate “Share on” on the button, and make sure to follow the Remind brand guidelines.

Share button icon configuration

The Remind ShareSDK also has the option of displaying icon based share buttons without the “Share on Remind” text. The icon buttons will scale to their parent containers and are SVGs so should scale without any degredation of image quality.

In order to enable this use the following data tags:

data-no-text

data-button-type

data-theme

This will behave exactly as theme does for the Share Button with text.

Example usage of creating a circle button with the light theme

<div style="width:50px">
  <div
    class="remind-composer-button"
    data-body="emample message!"
    data-body-url="remind.com/exampleLink"
    data-no-text="true"
    data-button-type="circle"
    data-theme="light"
  >
  </div>
</div>