KivoSign

Svelte

Incorpore a assinatura da KivoSign no seu sistema Svelte usando o SDK.

Instalação

npm install @documenso/embed-svelte

Modelo direto

<script lang="ts">
  import { EmbedDirectTemplate } from '@documenso/embed-svelte';

  const token = 'token-do-seu-modelo';

  function onCompleted(data: { documentId: number }) {
    console.log('Assinado:', data.documentId);
  }
</script>

<EmbedDirectTemplate
  {token}
  host="https://app.kivosign.com.br"
  name="João Silva"
  email="joao@exemplo.com"
  lockEmail={true}
  externalId="pedido-12345"
  onDocumentReady={() => console.log('Pronto')}
  onDocumentCompleted={onCompleted}
  onDocumentError={() => console.error('Erro')}
/>

Token de assinatura

<script lang="ts">
  import { EmbedSignDocument } from '@documenso/embed-svelte';

  export let token: string;

  function onCompleted(data: { documentId: number }) {
    console.log('Assinado:', data.documentId);
  }
</script>

<EmbedSignDocument
  {token}
  host="https://app.kivosign.com.br"
  onDocumentCompleted={onCompleted}
/>

Estilo personalizado

<script lang="ts">
  import { EmbedDirectTemplate } from '@documenso/embed-svelte';

  const token = 'seu-token';

  const customCss = `
    .documenso-embed {
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
  `;

  const cssVars = {
    primary: '#0000FF',
    background: '#F5F5F5',
    radius: '8px',
  };
</script>

<EmbedDirectTemplate
  {token}
  host="https://app.kivosign.com.br"
  css={customCss}
  cssVars={cssVars}
  darkModeDisabled={true}
/>

Veja Variáveis CSS para todas as variáveis disponíveis.


Veja também

Nesta página