API Documentation: Embedded Uploads

The URL for your embedded uploader is:

https://www.wellcomemat.com/embed/uploader?key=&secret=

• To use social distribution within the embedded uploader, please reach out to us to ensure you have the proper level of support.
• Videos will only be distributed to social media if the video_type query parameters are in the URL. For more information, see Video-Types for values.
• If you would like to use a callback to receive the media object after it uploads, you must use callback_location in the URL, not the other callback parameters. For more information, see Upload Action Callbacks for values.
• Quality in quality out. The more information you post with your videos, the better your abilities will be in querying your content, SEO and display within social media websites. To learn more about optional data fields, please see the Upload action section of our API docs.
• The embedded upload tool relies heavily on developers to pass good metadata with videos. End users can change the title that we will display in social media sites, but metadata provided by developers is maintained accurately in our database.

Embedding Uploader Through an iFrame

• If social distribution is turned OFF (takes less vertical area):

We suggest giving the iFrame an initial minimum width of 430px and height of 650px.

<iframe
  src="https://www.wellcomemat.com/embed/uploader?key=&secret="
  width="430" height="650" referrerpolicy="unsafe-url" frameborder="0" scrolling="no"
  style="margin-left:auto; margin-right:auto; display:block;"
  allowfullscreen allow="clipboard-write">
</iframe>

There is no need to add the responsive code below if you are not using distribution.

• If social distribution is turned ON (takes more vertical area):

We suggest giving the iFrame an initial minimum width of 1200px and height of 800px and that you make it responsive with the initial input values given (code below).

<iframe
  src="https://www.wellcomemat.com/embed/uploader?key=&secret="
  id="uploader_frame"
  width="1200" height="800" referrerpolicy="unsafe-url" frameborder="0" scrolling="no"
  style="margin-left:auto; margin-right:auto; display:block;"
  allowfullscreen allow="clipboard-write">
</iframe>

Making the iFrame responsive with distribution turned on

Use this code to make your video respond to all page widths.

• Requires jQuery (this dependency is included in the example script below).
• Frame should take up 85% of the width of the window. You can change this by adjusting 'width_ratio'.

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

<script>
  $(function () {
    var width_ratio = .85;

    $(window).resize(function () {
        resizeFrame();
    });

    // Set initial size.
    resizeFrame();

    /**
     * Sets iFrame height and width as a function of the window width.
     */
    function resizeFrame() {
      const window_width = $(window).width();
      var w = parseInt(window_width * width_ratio);
      if (window_width < 1167) {
        h = 1200;
      } else {
        h = 830;
      }

      $("#uploader_frame").width(w).height(h);
    }
  });
</script>

iFrame Listener MessageEvent

The Embedded Toolset iFrame will send Listener Events so that you can capture certain user interactions.

• Upload Event
• Delete Event

// listen for Upload and Delete events
// `event` is type MessageEvent
window.addEventListener('message', (event) => {
  const eventType = event.data.type || '';
  if (eventType == 'upload') {
    // outputs Media Object response
    console.log(event.data.payload);

  } else if (eventType == 'delete') {
    // outputs Deactivate response
    console.log(event.data.payload);
  }
});