API Documentation

Getting started

You can embed Superpeer Widgets in three different types: Inline Embed, Slide-in and Popup. This documentation will cover how to configure your embedded widget. However, you can simply copy and paste prebuild widget code in Superpeer Dashboard to quickly add a widget to your website. This documentation aims to detail the widget options and properties in a technical way.

Creating your first widget

index.html

<link rel="stylesheet" type="text/css" href="https://widgets.superpeer.com/widget.css">
<script type="text/javascript" src="https://widgets.superpeer.com/widget.js" async></script>

First of all, you need to add required resources to your HTML file. Superpeer Widgets require one stylesheet and one script file to work. We try to make the required resources as lightweight as possible, they are currently around 5KB Gzipped.

index.html

window.onload = () => {
  new Superpeer.Widget({
    embed: { ... },
    launcher: { ... },
    config: { ... },
  });
};

After adding the required resources, you need to instantiate a new Superpeer.Widget on window.load. Superpeer.Widget constructor accepts an Object with the following keys: embed, launcher and config. Before diving into the possible values of these object, let's see a complete working example.

index.html

<!-- your existing HTML content -->

<link rel="stylesheet" type="text/css" href="https://widgets.superpeer.com/widget.css">
<script type="text/javascript" src="https://widgets.superpeer.com/widget.js" async></script>

window.onload = () => {
  new Superpeer.Widget({
    embed: {
      type: 'slide-in',
    },
    launcher: {
      type: 'button',
      options: {
        title: 'Let\'s chat',
        backgroundColor: '#ff9200',
        textColor: '#ffffff',
      },
    },
    config: {
      username: 'fatihacet',
      serviceSlug: '30m',
    },
  });
};

Constructor Options

embed Options

This object is used to configure the type of the embed.

Key	Required	Description
type string	REQUIRED	Type is the only required parameter of the embed object. Possible values can be inline, slide-in, popup. This will basically configure how your embed will loook like. For more details see Examples page.
wrapperSelector string	CONDITIONAL Only when embed type is inline	Pass a valid CSS selector as the wrapper element of the inline widget. Widget JavaScript code will automatically take over this element and embed the widget inside.

launcher Options

This object is used to configure the launcher of the widget.

Info

Inline Embeds doesn't require passing this object because they don't have a launcher. They will automatically be displayed when the page is loaded.

Key	Required	Description
type string	REQUIRED	Define the type of the launcher. Possible values can be button, profile-video, profile-avatar, superpeer-logo and custom.
options object		You can customize launcher using this object. Below you can find detailed options for selected launcher type.
Button Launcher Options
title string	REQUIRED	Title of the launcher button.
backgroundColor string	OPTIONAL	Color of the button. Defaults to #0967d2.
textColor string	OPTIONAL	Color of the button text. Defaults to #ffffff.
size string	OPTIONAL	Size of the button. Options are large, medium, small and defaults to medium.
Custom Launcher Options (I will use my own website elements)
selector string	OPTIONAL	Valid CSS selector to query DOM elements and bind click listener to show embed in Popup type.

config Options

This object is used to configure embed content.

Key	Required	Description
username string	REQUIRED	Your Superpeer username
serviceSlug string	OPTIONAL	If you pass a valid Superpeer service slug widget will automatically start from showing given service details. If you don't pass this option, your Superpeer public profile will be embedded.