Vue
Incorpore a assinatura da KivoSign no seu sistema Vue usando o SDK.
Instalação
npm install @documenso/embed-vueModelo 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
- Visão geral da incorporação - Propriedades e conceitos
- Variáveis CSS - Personalize a aparência
- Editor - Incorpore a criação de documentos

