managers/widget.js

import SDK from "../sdk";

/**
 * @class SmartWidget
 * @hideconstructor
 */
export default class SmartWidget {
    /**
     * Create and display a Smart Widget.
     *
     * @memberOf SmartWidget
     * @param {Object} params
     * @param {string} params.target - ID of the <code>div</code> where the Smart Widget will be shown.
     * @param {string} params.token - Unique Smart Link token of your choice, e.g <code>holiday2018</code>.
     * @param {Object} params.options - Visual customization options.
     * @param {string} params.options.bgColor - Smart Widget background color.
     * @param {string} params.options.smsTxtColor - Text color for the SMS description.
     * @param {string} params.options.sendBgColor - Send button background color.
     * @param {string} params.options.sendTxtColor - Send button text color.
     */
    static create(params) {
        params = params || {};
        const options = {
            isSI: true,
            method: "POST",
            body: {
                app_id: SDK._appId,
                token: params.token,
                options: JSON.stringify(params.options || {}),
            },
        };

        // DOM element the widget will be rendered to.
        const target = params.target;

        // Make sure the container element exists.
        if (typeof target !== 'string' || !document.getElementById(target)) {
            console.log("Container for Smart Widget with id '%s' doesn't exist.", target);
            return;
        }

        SDK.rawRequest("/sdk/smart-widget", options).then(function (resp) {
            SmartWidget._render(target, resp.data.url);
        }).catch(function(err) {
            console.log(err);
        });
    }

    /**
     * Renders a Smart Widget with the given URL to the given div.
     *
     * @ignore
     * @param {string} target - Target DOM element.
     * @param {string} url - URL of the Smart Link to be used.
     * @private
     */
    static _render(target, url) {
        let frame = document.createElement("iframe");
        // Use a unique frame ID so there can be multiple widgets on the same page.
        frame.id = "getsocial-widget-frame-" + btoa(Math.random() + "").substr(10, 10);
        frame.width = "310px";
        frame.height = "190px";
        // noinspection JSValidateTypes
        frame.style = "border: none;";
        frame.src = url;
        document.getElementById(target).appendChild(frame);
    }
}