Custom integrations

<button id="report-issue" type="button">Report an issue</button>

import { createFeedback } from 'sightingdev';

const feedback = createFeedback({ endpoint: '/api/feedback' });
const button = document.querySelector('#report-issue');
const open = () => feedback.open();
button.addEventListener('click', open);

// On teardown:
// button.removeEventListener('click', open);
// feedback.destroy();

import { useEffect, useRef } from 'react';
import { createFeedback } from 'sightingdev';

export function ReportButton({ endpoint = '/api/feedback' }) {
  const client = useRef(null);

  useEffect(() => {
    const feedback = createFeedback({ endpoint });
    client.current = feedback;
    return () => {
      feedback.destroy();
      client.current = null;
    };
  }, [endpoint]);

  return (
    <button type="button" onClick={() => client.current?.open()}>
      Report an issue
    </button>
  );
}

import { createFeedback } from 'sightingdev';

const feedback = createFeedback({ endpoint: '/api/feedback' });
let draft;
let previewUrl;

// Wire to an explicit "Capture" action in your UI.
async function preparePreview(imageElement) {
  try {
    const next = await feedback.capture();
    if (previewUrl) URL.revokeObjectURL(previewUrl);
    draft = next;
    previewUrl = URL.createObjectURL(draft.screenshot);
    imageElement.src = previewUrl;
    return { ok: true };
  } catch (error) {
    return { ok: false, message: error.message };
  }
}

// Wire to an explicit "Send" action after the user reviews the preview.
async function submitDraft(text) {
  if (!draft) return { ok: false, message: 'Capture a screenshot first.' };
  try {
    await feedback.send({ ...draft, text });
    return { ok: true };
  } catch {
    return { ok: false, message: 'Delivery was not confirmed. Please try again.' };
  }
}

function cleanup() {
  if (previewUrl) URL.revokeObjectURL(previewUrl);
  feedback.destroy();
}

const draft = await feedback.capture();
const report = {
  ...draft,
  context: { ...draft.context, url: location.origin },
  text: 'Checkout did not open.',
};
// After the user reviews and chooses Send:
await feedback.send(report);