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

