Guia técnico do Widget Contact Desk para integração com Spincare

<!-- Contact Desk Chat Widget -->
<script>
  (function(w,d,s,o,f,js,fjs){
    w['ContactDeskWidget']=o;
    w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);
    fjs=d.getElementsByTagName(s)[0];
    js.id=o;
    js.src=f;
    js.async=1;
    fjs.parentNode.insertBefore(js,fjs);
  }(window,document,'script','cdw','https://app.contactdesk.com.br/widget/widget.js'));

  cdw('init', '{WIDGET_KEY_PUBLICA}');
</script>
<!-- End Contact Desk Chat Widget -->

const widgetKey = '{WIDGET_KEY_PUBLICA}';
const baseUrl = `https://app.contactdesk.com.br/api/widget/${widgetKey}`;

const response = await fetch(`${baseUrl}/config`, {
  headers: { Accept: 'application/json' },
});

if (!response.ok) {
  throw new Error(`Falha ao carregar widget: ${response.status}`);
}

const config = await response.json();

const requiresName = Boolean(config.requirements?.name);
const requiresEmail = Boolean(config.requirements?.email);
const allowAttachments = Boolean(config.allow_attachments);

const sessionId = await getOrCreateSecureSessionId();

const response = await fetch(`${baseUrl}/conversation`, {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    session_id: sessionId,
    visitor_name: 'Nome do visitante',
    visitor_email: 'visitante@empresa.com',
    visitor_phone: '(00) 00000-0000',
    initial_message: 'Olá, preciso de atendimento.',
  }),
});

const data = await response.json();
const conversationId = data.conversation.id;
const lastId = data.last_id ?? 0;

const clientMessageId = crypto.randomUUID();

const response = await fetch(`${baseUrl}/conversation/${conversationId}/message`, {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    session_id: sessionId,
    sender_name: 'Visitante',
    message: 'Preciso acompanhar minha solicitação.',
    client_message_id: clientMessageId,
  }),
});

const data = await response.json();

if (data.duplicate === true) {
  renderMessage(data.message);
}

async function fetchNewMessages(lastId) {
  const url = new URL(`${baseUrl}/conversation/${conversationId}/messages`);
  url.searchParams.set('session_id', sessionId);
  url.searchParams.set('after_id', String(lastId));
  url.searchParams.set('limit', '80');

  const response = await fetch(url, {
    headers: { Accept: 'application/json' },
  });

  const data = await response.json();

  return {
    messages: data.messages ?? [],
    lastId: data.last_id ?? lastId,
    typing: data.typing ?? null,
  };
}

const formData = new FormData();
formData.append('session_id', sessionId);
formData.append('file', selectedFile);

const response = await fetch(`${baseUrl}/conversation/${conversationId}/attachment`, {
  method: 'POST',
  body: formData,
});

if (response.status === 403) {
  throw new Error('Anexos não estão habilitados para este widget.');
}

const data = await response.json();
renderMessage(data.message);