A ativação do plugin é muito simples e rápida e pedente apenas em 3 etapas.
A ativação pode ser feita tanto utilizando Javascript nativo ou qualquer outro framework JS de sua preferência.

Etapa 1

A primeira etapa é injetar a biblioteca JavaScript do integrador de API do Piperun CRM de atendimento.

    <!-- Adiciona a biblioteca JavaScript do integrador de API Piperun CRM de atendimento -->
    <script async defer crossorigin="anonymous" src="https://crmpiperun.cxm.pipe.run/assets/js/apisync.min.js"></script>

Etapa 2

A segunda etapa consiste em adicionar o script abaixo que efetua a inicialização o plugin e dispara a execução da integração.

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            crmaApi.init({
                tenancy: 'crmpiperun',  // <-- Informe aqui o subdomínio do cliente. Ex: crmpiperun
                callback_id: 'abc123',  // <-- Informe aqui um código identificador da integração. Este mesmo código será enviado de volta no callback
                callback_uri: 'http://www.seusite.com.br/endereco_retorno_callback',  // <-- Este é o endereço que irá receber um post com as credencias de API
            });
        });

        function crmaApiSync() {
            crmaApi.sync();
        }
    </script>

    <script>
        $(function(){
            crmaApi.init({
                tenancy: 'crmpiperun',  // <-- Informe aqui o subdomínio do cliente. Ex: crmpiperun
                callback_id: 'abc123',  // <-- Informe aqui um código identificador da integração. Este mesmo código será enviado de volta no callback
                callback_uri: 'http://www.seusite.com.br/endereco_retorno_callback',  // <-- Este é o endereço que irá receber um post com as credencias de API
            });
        });

        function crmaApiSync() {
            crmaApi.sync();
        }
    </script>

Após colocar este trecho no seu código, você precisa efetuar a configuração dos campos tenancy, callback_id e callback_uri.
Esses campos serão utilizados da seguinte forma:

tenancy: Este campo identifica qual é a sua empresa, é o mesmo código do subdomínio utilizado para acessar o ambiente web. Por exemplo, se o endereço do seu sistema é empresaabc.5hub.com.br, o seu tenancy é "empresaabc";
callback_id: Este campo é um identificar de livre escolha, para caso seja necessário efetuar algum vínculo entre o usuário que esta acessando e o payload de retorno. O mesmo valor informado aqui, será enviado para o seu endereço de callback;
callback_uri: Este é endereço do seu callback, após o usuário efetuar a autenticação, as credenciais de acesso à API serão enviadas para este endereço, utilizando o método POST.

Etapa 3

Por fim, você precisa definir em que local do seu sistema irá aparecer o botão para disparar a sincronização, e inserir o código abaixo:
OBS: Este é apenas um exemplo, você é livre para customizar o botão da forma como achar necessário. O importante é executar a função "crmaApiSync"

    <!-- Adiciona o botão de sincronização do CRM de atendimento -->
    <button id="btn-sync-crma-api" onclick="crmaApiSync()">Sincronizar API</button>

    <!-- Adiciona o botão de sincronização do CRM de atendimento -->
    <button id="btn-sync-crma-api">Sincronizar API</button>

    <script>
        document.getElementById('btn-sync-crma-api').addEventListener("click", (e) => {
            e.preventDefault();
            crmaApiSync();
        });
    </script>

    <!-- Adiciona o botão de sincronização do CRM de atendimento -->
    <button id="btn-sync-crma-api">Sincronizar API</button>

    <script>
        $(document).on('click', '#btn-sync-crma-api', function (e) {
            e.preventDefault();
            crmaApiSync();
        });
    </script>

OBS: Por motivos de segurança, antes de implementar este plugin é necessário entrar em contato com a empresa para solicitar a aprovação e liberação da URL do seu sistema.

Callbak de retorno

Após o usuário de API estiver autenticado com sucesso, o payload abaixo contendo as credenciais de acesso será enviado para o endereço informado no campo "callback_uri" do plugin de integração.

{
    "login": "testeapi",
    "callback_id": "abc123",
    "token_type": "Bearer",
    "access_token": "eyJ0eXAiOieyJhdWQiOiIxMiIsImp0aSI6ImUyZWNmMDhlMJHJKg7GHFyt4yfg2E4OTgwZjNhM2FhMDQwNjExMTMxZmUxZTUxOGZiYmY2NWQwZGNmMjg3NDQ4ZDAzM2FiNzcyYjNiOTNkYThhIiwiaWF0IjoxNjg1MTA5NzIzLjgxNDA2NiwibmJmIjoxNjg1MTA5NzIzLjgxNDA2OSwiZXhwIjoxNjg1MTk2MTIzLjc5OTUxLCJzdWIiOiI2OSIsInNjb3BlcyI6W119.fe2BCMdt_5mCOa5WhQY2JKVTqEpQUPemPX_67LlmBwJNwLIM8-OCNKLnWNTVsnPnXVIK8yU0ym9v77qkaP3qB7QCib2l6mUTZ9Hht9jJNre-fw0uy1Gj6XgsuQD8HBPVtTe9ETv-bJp_zVF8E-TCC9keZQjalBNeeXDEg1QROsXESeFXlllbxaztdvmABKBMJPxqgM5CeuzaFvjLZZs9OF7GUIz9TnNxhfNtoCc5i4jSt4ECMwh0Uo57_oBYuJ2nnWuwONLWl4QAHMs46UBL-_XQlPJyymJXYMimg8HDeRAStguZaXK3OXOhJVN8FqVvoMvGHJhfjm-0VzaCJL6XRrA-ZAtzZzuV8w0BFOE9JH8CbjgR2RSuJhkzEdu-1ilgOLefRejavmw8f3deVrekAj-d-SKsIE0iNH-F4s9QdqVjMZeq4Qw3tdsoxyYjd9H18oyoRurxMLdLuV_YFfuctMAh-lLq_AKxWDHE-XevW5sRJlPlTHHQXzp0hS-CQY26FlqO5K8185u2airw84XQ_np-s3Sb7ZNO0d3fKvC4Ka_jHW_j9XdhuPIucPpG-lYGzUtGFM1QDCpmV6LJzia45p99YKmjW54wHBixyvZVNpVzB_2i2qtVaU9X5xHzDolLquMfsCraYSZZoZE2qr255KCCwBeRFh_QkzteYYRqCKE",
    "expires_in": 86400,
    "expires_at": "2023-05-22 21:02:03",
    "refresh_token": "def5020016c06c77a7f4gfdg465g4f65d4hg654hg654h6f54652d0f37c3582ab8a67e8a09cebfc8e056605e73ee499668817ee120534d44075b2473d19c61f3160e7d2f42e25c901328bab8c64953a001245d749c9b5feffa7dd642836ae1d1cf0bc5f314a5398efb0e6df7158f591cff67b227b02b0ec18e0bb72b9681671da14529a87fb8e3416ff6aba23402298973e9e32fc30aa4957648a660b21455284f2031886860e35403b687cfbcf8522e785e200fae8ea23f3e105f8d50d671060c91121885539f8aa4f7aafa3f3e2422603bac33c35f65a10df82f2b471e3651f45612d64fe0a51f4ce4ba19223bd95d003b3e3707a131b9520248a3621fc3f6fc7d078ba8325f925e362a72a3509681d70075ea7407f7c174229c9ed0697ccaf5d248ad249f58f69dc825efd3d59297f897513536d3d9954f3571a357b26a71c63969dc8a2hjkJKgjhgJgj5757JKJHkjfd084e75e2ed9f8a5b"
}

Vídeo hands-on

Segue a seguir um vídeo mostrando a construção da integração a partir do zero:
https://drive.google.com/file/d/1gwJGo0WPkVQNKY5CS25ti8pOpfmI3wA0/view?usp=share_link