Demos

Explore code snippets examples and demos for using the Kustomer Cards SDK.

Explore demos and view examples for how you can use the Kustomer Cards SDK to render UI within Kustomer.

Card demo

An example of a card that displays a link to search for the email address of a customer in Google:

<html>
    <head>
        <script src="https://cdn.kustomerapp.com/card-js/latest/kustomer-card.min.js"></script>
        <script>
            function loadContext() {
                // Kustomer.initialize is required for card visibility in the panel.
                Kustomer.initialize(function(contextJSON) {
                    var customer_attributes = contextJSON.customer.attributes;
                    if (customer_attributes.emails.length) {
                        var email = customer_attributes.emails[0].email;
                        var a = document.createElement('a');
                        var linkText = document.createTextNode("Google");
                        a.appendChild(linkText);
                        a.title = "Search google for information about the customer";
                        a.href = "https://www.google.com/#q=" + encodeURIComponent(email);
                        a.target = "_blank";
                        document.getElementById("container").appendChild(a);
                        Kustomer.resize();
                    } else {
                        // Closes the card if the customer has no email addresses.
                        Kustomer.close();
                    }
                });
            }
        </script>
    </head>
    <body onload="loadContext()">
        <div class="ui card mainCard">
            <div class="content">
                <div class="ui header cardHeader">
                    Google Search
                </div>
            </div>
            <hr class="lineBreak">
            <div id="container" class="ui one textArea"></div>
        </div>
    </body>
</html>

Widget demo

An example of an app widget that opens to the provided customer event when the user selects Open Customer:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <base href="/">
        <title>App</title>
      <script src="http://cdn.helpapp.io/card-js/latest/kustomer-card.min.js"></script>
    </head>
    <body style="background: #4f97d5; color: #fff; font-size: 5em; font-family: sans-serif; text-align: center;">
        <div style="margin-top: 200px;">
            <p>iFrame App</p>
            <p>
            <button id="button" onclick="onClick()">Open Customer</button>
            </p>
        </div>
        <script>
                    // Kustomer.initialize is required for widget visibility.
            Kustomer.initialize(function() {
            // Open widget after 5 seconds
            setTimeout(function() {
                Kustomer.open();
            }, 5000);
            // Add comment here
            function onClick() {
            Kustomer.openCustomerEvent(
                "59b6a3e87db8d80013929f8",
                "5a524a5dfa0a1600173e73c6"
            );
            }
        });
        </script>
    </body>
</html>

Card with modal demo

An example of a card that displays a link to search for the email address of a customer in Google with a modal [insert what the modal does]:

<html>
    <head>
        <script src="https://cdn.kustomerapp.com/card-js/latest/kustomer-card.min.js"></script>
        <script>
            function loadContext() {
                // Kustomer.initialize is required for card visibility in panel.
                Kustomer.initialize(function(contextJSON) {
                    var customer_attributes = contextJSON.customer.attributes;
                    if (customer_attributes.emails.length) {
                        var email = customer_attributes.emails[0].email;
                        var a = document.createElement('a');
                        var linkText = document.createTextNode("Google");
                        a.appendChild(linkText);
                        a.title = "Search google for information about the customer";
                        a.href = "https://www.google.com/#q=" + encodeURIComponent(email);
                        a.target = "_blank";
                        document.getElementById("container").appendChild(a);
                        Kustomer.resize();
                    } else {
                        // customer has no email addresses - close the card
                        Kustomer.close();
                    }
                });
            }
          // Add comment about modal
            function initAndShowModal() {
                const options = {
                    id: 'myModal',
                    title: 'Hello from Card-JS!',
                    url: 'https://www.kustomer.com',
                    height: 500,
                    width: 500,
                };
                Kustomer.modal.init(options, (data) => {
                    Kustomer.modal.show('myModal');
                });
            }
        </script>
    </head>
    // Add
    <body onload="loadContext()">
        <div class="ui card mainCard">
            <div class="content">
                <div class="ui header cardHeader">
                    Kustomer Modals
                </div>
            </div>
            <hr class="lineBreak">
            <div id="container" class="ui one textArea"></div>
            <button onclick="initAndShowModal()">Click Me To Launch A Modal</button>
        </div>
    </body>
</html>

Did this page help you?