Introdução

O Embed é a solução da Credere que permite incorporar todo o processo de simular e gerar uma proposta no seu projeto, como em uma página da web ou em um aplicativo, de forma que esse conteúdo seja exibido diretamente na plataforma de destino, personalizado, sem que o usuário precise visitar o Credere ou sequer saber que a ela está nos bastidores.

Fluxo

O nosso Embed tem 3 páginas disponíveis, são elas

Simulação - Um formulário onde é solicitado informações do veículo e do cliente que deseja financiar.
Resultados - Exibe todas as condições disponíveis de uma simulação
Cliente/proposta - Solicita os dados do cliente de acordo com a condição que ele selecionou na página de resultados, permitindo que seja criada uma proposta.

Geração de Token

Passo 1: Após passar pela nossa etapa de integração onde serão configurados os usuários e bancos, será enviado um ID da aplicação e um Secret.
Passo 2: Siga as etapas informadas na nossa documentação para criar um token de acesso à API - No escopo deve-se utilizar “embedded”.

Obs: caso você tenha recebido um token pronto, pode ignorar essa etapa e seguir para a próxima.

Exemplo de implantação

Aqui você encontra um exemplo completo do fluxo aplicado a uma página HTML.

📘
O iframe do Embed será carregado no elemento que tenha o ID "credere". Ex: <div id="credere"></div>. Caso não esteja presente, será carregado no body.

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

    <title>Processo completo: Lead, simulação, cliente e proposta - Credere's &lt;embed></title>

    <style>* { margin: 0; padding: 0; } body { max-width: 1024px; margin: 0 auto; }</style>
  </head>
  <body>

  <script type="text/javascript">
    window.CREDERE = window.CREDERE || {};

    window.CREDERE.environment = window.prompt('URL da API:\n(Padrão: https://app.meucredere.com.br/api/v1)');
    window.CREDERE.authorization = window.prompt('Token de autenticação na API do Credere:');

    /*
      Aqui configuramos o endpoint inicial do Embed como sendo o formulário de simulação
    */
    window.CREDERE.src = 'https://embed.meucredere.com.br/simulations/form';

    window.CREDERE.settings = {
      simulations: {
        /*
          Configurações do formulário da simulação
        */
        form: {
          /* Aqui você pode fazer o pré-preenchimento dos campos do
             formulário da simulação. Esses campos serão preenchidos
             automaticamente no formulário e sumirão da tela. Exemplo: */

          // store_id: <PRÉ-PREENCHA_O_ID_DA_LOJA_AQUI>,
        },
        
        /*
          Configurações da página de resultado da simulação
        */
        read: {
          store_id: null, // vai ser configurado em um callback abaixo
          uuid: null // vai ser configurado em um callback abaixo
        },
      },

      customers: {
        /*
          Configurações do formulário de cliente (e cadastro de proposta)
        */
        form: {
          cpf: null, // vai ser configurado em um callback abaixo
          _proposal: {
            store_id: null, // vai ser configurado em um callback abaixo
            simulation_uuid: null, // vai ser configurado em um callback abaixo
            condition_ids: null, // vai ser configurado em um callback abaixo
          },
        },
      },
    };

    window.CREDERE.callbacks = {
      /*
        Callbacks disparados quando um lead é criado/atualizado
      */
      'lead:create': function(data) {
        window.alert(`Lead (CPF ${data.data.cpf_cnpj}) criado com sucesso! Criando simulação...`);
      },
      'lead:update': function(data) {
        window.alert(`Lead (CPF ${data.data.cpf_cnpj}) atualizado com sucesso! Criando simulação...`);
      },

      /*
        Callback disparado quando uma simulação é criada
      */
      'simulation:create': function(data) {
        window.alert(`Simulação (UUID ${data.data.uuid}) criada com sucesso! Redirecionando para a página de resultado...`);

        /* Aqui preenchemos as configurações da página de leitura da
           simulação com os dados da simulação criada anteriormente
           recebidas nesse callback (ID da loja e UUID da simulação) */

        window.CREDERE.settings.simulations.read.store_id = data.data.payload.store_id;
        window.CREDERE.settings.simulations.read.uuid = data.data.uuid;

        /*
          Aqui atulizamos o endpoint do Embed para o de resultado da simulação
        */
        window.CREDERE.src = 'https://embed.meucredere.com.br/simulations/read';
        document.getElementById('credere-initializer-iframe').src = window.CREDERE.src;
      },
      
      /*
        Callback disparado quando o cliente escolhe a(s) parcela(s) preferida(s) no resultado da simulação
      */
      'simulation:read:action': function(data) {
        /*
          Aqui verificamos se a ação (clique) foi no botão de cadastrar proposta
        */
        if (data.action === 'customers/form') {
          window.alert(`O usuário clicou em cadastrar proposta, com a(s) condição(ões) de ID(s) ${data.settings.condition_ids.join(', ')} selecionada(s). Redirecionando para o formulário de cliente...`);

          /* Aqui preenchemos as configurações do formulário de cliente, com o
             CPF do lead cadastrado no passo da simulação, ID da loja e ID(s) da(s)
             condição(ões) selecionadas na página de resultado da simulação */

          window.CREDERE.settings.customers.form.cpf = data.settings.cpf;
          window.CREDERE.settings.customers.form._proposal.store_id = data.settings.store_id;
          window.CREDERE.settings.customers.form._proposal.simulation_uuid = data.settings.simulation_uuid;
          window.CREDERE.settings.customers.form._proposal.condition_ids = data.settings.condition_ids,

          /*
            Aqui atulizamos o endpoint do Embed para o de formulário do cliente/proposta
          */
          window.CREDERE.src = 'https://embed.meucredere.com.br/customers/form';
          document.getElementById('credere-initializer-iframe').src = window.CREDERE.src;
        }
      },

      /*
        Callbacks disparados quando um cliente é criado/atualizado
      */
      'customer:create': function(data) {
        window.alert(`Cliente (CPF ${data.customer.cpf}) criado com sucesso! Criando proposta...`);
      },
      'customer:update': function(data) {
        window.alert(`Cliente (CPF ${data.customer.cpf}) atualizado com sucesso! Criando proposta...`);
      },

      /*
        Callback disparado quando uma proposta é criada
      */
      'proposal:create': function(data) {
        window.alert(`Proposta (ID ${data.complete_proposal.id}) criada com sucesso!`);
      },
    };

    const credereJS = document.createElement('script');
          credereJS.type = 'text/javascript';
          credereJS.src = 'https://embed.meucredere.com.br/initialize.js';
    document.body.append(credereJS);
  </script>
  </body>
</html>

As próximas páginas descrevem a configuração de cada etapa e opções de personalização.