JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://eurica.github.io/pdjs/js/pdjs.js"></script>
<!--
This is a simple example that uses rich incidents in the PagerDuty integration API along with the Google Charts API.

Put one of your service keys in the form on the lower right and trigger an incident to see an embeded image and links to a phone conference.

- It uses https://github.com/eurica/pdjs
- For more details on triggering an incident, https://developer.pagerduty.com/documentation/integration/events/trigger

Please contact [email protected] with any questions

-->

<form>
    <table border=0>
        <tr>
            <td>Service Key:</td>
            <td>
                <input type="text" size="50" placeholder="56debc0c07a8492b89cd78a2d29785a3" id="servicekey" value="56debc0c07a8492b89cd78a2d29785a3" />
            </td>
        </tr>
        <tr>
            <td>Description:</td>
            <td>
                <input type="text" value="Testing rich incidents" size="50" id="description" />
            </td>
        </tr>
        <tr>
            <td>Some numbers for google charts:</td>
            <td>
                <input type="text" value="1,2,3,6,4,2,3,5,7" size="50" id="gnumbers" />
            </td>
        </tr>
        <tr>
            <td>Conference call #:</td>
            <td>
                <input type="text" value="14154830734" size="50" id="cnumber" />
            </td>
        </tr>
        <tr>
            <td>Trigger incident:</td>
            <td>
                <input type="button" value="Click to trigger incident" onclick="PDTrigger()" />
            </td>
        </tr>
    </table>
</form>

JavaScript

$ = jQuery;
PDJS = new PDJSobj();

function PDTrigger() {
    service_key = $("#servicekey").val()
    description = $("#description").val()
    gnumbers = $("#gnumbers").val()
    cnumber = $("#cnumber").val()

    contexts = [{
        "type": "image",
        "src": "https://chart.googleapis.com/chart?chs=600x400&chd=t:" + gnumbers + "&cht=lc&chds=a&chxt=y&chm=D,0033FF,0,0,5,1"
    }, {
        "type": "link",
        "href": "tel:" + cnumber,
        "text": "Join the conference call"
    }, {
        "type": "link",
        "href": "skype:" + cnumber,
        "text": "Join the conference call via Skype"
    }, {
        "type": "link",
        "href": "http://developer.pagerduty.com",
         "text": "PagerDuty Docs"
    }]
    incident = {
        incident_key: Date.now(),
        service_key: service_key,
        description: description,
        details: {},
        data: {
            contexts: contexts
        },
        success: function (json) {
            alert(JSON.stringify(json))
            console.log(json)
        }
    }
    console.log(incident)
    t = PDJS.trigger(incident);
    console.log(t)
}