KivoSign

Vue

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

Instalação

npm install @documenso/embed-vue

Modelo direto

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

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

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

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

Token de assinatura

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

  const props = defineProps<{ token: string }>();

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

<template>
  <EmbedSignDocument host="https://app.kivosign.com.br" :token="props.token" @document-completed="onCompleted" />
</template>

Estilo personalizado

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

  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>

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

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


Veja também

Nesta página