insights-js/packages/browser/playground/cypress/index.html

<html>

<head>
    <title>Insights JS Snippet test</title>
</head>

<body>
    <!-- Product tour test elements -->
    <div id="custom-banner-container" style="border: 1px dashed #ccc; padding: 0; margin-bottom: 10px;"></div>
    <a id="nav-link" href="./page2.html" style="display: block; margin-bottom: 10px;">Go to Page 2</a>
    <button id="tour-target" style="margin-bottom: 10px;">Target Element</button>
    <button id="click-trigger-btn" style="margin-bottom: 10px;">Start Tour</button>
    <!-- if u remove these the product tours tests will break! -->

    <button data-cy-button>Some button</button>

    <br />

    <input data-cy-input placeholder="Input" />

    <br />

    <button data-cy-custom-event-button onclick="insights.capture('custom-event', { foo: 2 })">
        Send custom event
    </button>

    <button data-cy-fetch-call-button onclick="makeFetchNetworkPost()">
        Make fetch post network call
    </button>

    <button data-cy-xhr-call-button onclick="makeXHRNetworkPOST()">
        Make XHR post network call
    </button>

    <script>
        function makeFetchNetworkPost() {
            fetch('https://example.com', {
                body: 'i am the fetch body',
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
        }

        function makeXHRNetworkPOST() {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://example.com');
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onload = function () {
                if (xhr.status >= 200 && xhr.status < 300) {
                    console.log('Response:', xhr.responseText);
                } else {
                    console.error('Request failed with status:', xhr.status);
                }
            };
            xhr.onerror = function () {
                console.error('Network error');
            };
            xhr.send('i am the xhr body');
        }
    </script>
    <br />

    <button data-cy-feature-flag-button onclick="console.log(insights.isFeatureEnabled('some-feature'))">
        Test a feature flag
    </button>

    <button class="test-surveys" onclick="insights.getActiveMatchingSurveys(surveys => console.log(surveys))">
        Test surveys
    </button>

    <br />

    <div data-cy-captures>
    </div>


    <a data-cy-link-mask-text>
        Sensitive text!
    </a>

    <a class="secret-text">
        Sensitive text for remote masking!
    </a>

    <!-- TODO: Remove the ="true" once we have fixed the bug with autocapture to ensure E2E that it works -->
    <button data-cy-button-sensitive-attributes="true" class='sensitive' id='sensitive' data-sensitive='sensitive'>
        Sensitive attributes!
    </button>

    <button data-cy-button-throws-error="true" onclick="throw new Error('This is an error')">
        Throw error
    </button>

    <button data-cy-exception-button onclick="insights.captureException(new Error('wat even am I'), { extra_prop: 2 })">
        Capture an exception
    </button>

    <button data-cy-exception-string-button
        onclick="insights.captureException('I am a plain old string', { extra_prop: 2 })">
        Capture as string
    </button>

    <div style="display: flex; flex-direction: column; gap: 0.5em;">
        <h3>my favourite takeaway has this order now not button in their hero image</h3>
        <div data-cy-dead-click-text style="width: fit-content">it's a great example of why you need dead click tracking
        </div>
        <img data-cy-not-an-order-button width="400" height="200"
            alt="my favourite takeaway has this order now not button in their hero image"
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAIAAADTED8xAAADMElEQVR4nOzVwQnAIBQFQYXff81RUkQCOyDj1YOPnbXWPmeTRef+/3O/OyBjzh3CD95BfqICMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMK0CMO0TAAD//2Anhf4QtqobAAAAAElFTkSuQmCC" />
    </div>

    <script>
        !function (t, e) { var o, n, p, r; e.__SV || (window.insights = e, e._i = [], e.init = function (i, s, a) { function g(t, e) { var o = e.split("."); 2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function () { t.push([e].concat(Array.prototype.slice.call(arguments, 0))) } } (p = t.createElement("script")).type = "text/javascript", p.crossOrigin = "anonymous", p.async = !0, p.src = s.api_host + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r); var u = e; for (void 0 !== a ? u = e[a] = [] : a = "insights", u.people = u.people || [], u.toString = function (t) { var e = "insights"; return "insights" !== a && (e += "." + a), t || (e += " (stub)"), e }, u.people.toString = function () { return u.toString(1) + ".people (stub)" }, o = "capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getSurveys getActiveMatchingSurveys captureException".split(" "), n = 0; n < o.length; n++)g(u, o[n]); e._i.push([i, s, a]) }, e.__SV = 1) }(document, window.insights || []);
    </script>

    <p>just some text</p>

    <div>
        <p>this is where surveys are rendered</p>
        <div id="survey" />
    </div>

</body>

</html>