For SPAs

Integrar o snippet JavaScript do SEATEXT AI à sua Single Page Application (SPA) envolve incorporar o código fornecido ao seu projeto. Este guia abordará as etapas necessárias para adicionar este snippet de código, garantindo que ele se integre perfeitamente a vários frameworks de SPA, como React, Vue e Angular.

Snippet SEATEXT AI

Aqui está o snippet SEATEXT AI que você precisa inserir:

SEATEXTCODEINTEGRATION

Instruções Gerais

Identify the Entry Point: Determine where your SPA initializes. This is typically in an index.html file or a main JavaScript/TypeScript file where your framework mounts the application. Add the Snippet: Insert the SEATEXT AI snippet within the body tag of your index.html file, or in the equivalent initialization section of your SPA framework.

Instruções para Frameworks SPA Específicos

Uso do Armazenamento Local: O script armazena um ID no armazenamento local. Certifique-se de que seu aplicativo tenha as permissões necessárias para acessar e usar o armazenamento local.

In a React application, the entry point is usually the public/index.html file. Locate index.html: Find the public/index.html file in your React project. Insert the Snippet: Add the SEATEXT AI snippet just before the closing </body> tag.

Exemplo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React App</title> </head> <body> <div id="root"></div> <script> localStorage.setItem('seatext_id', "96733aab-aaad-4e0e-90ec-5c899e524514"); window.globalSeatextID = "96733aab-aaad-4e0e-90ec-5c899e524514"; </script> <script async src="https://login.seatext.com/seatext.js?id=96733aab-aaad-4e0e-90ec-5c899e524514"></script> </body> </html>

2. Vue.js

In a Vue.js application, the entry point is typically the public/index.html file. Locate index.html: Find the public/index.html file in your Vue project. Insert the Snippet: Add the SEATEXT AI snippet just before the closing </body> tag.

Exemplo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue App</title> </head> <body> <div id="app"></div> <script> localStorage.setItem('seatext_id', "96733aab-aaad-4e0e-90ec-5c899e524514"); window.globalSeatextID = "96733aab-aaad-4e0e-90ec-5c899e524514"; </script> <script async src="https://login.seatext.com/seatext.js?id=96733aab-aaad-4e0e-90ec-5c899e524514"></script> </body> </html>

3. Angular

In an Angular application, the entry point is usually the src/index.html file. Locate index.html: Find the src/index.html file in your Angular project. Insert the Snippet: Add the SEATEXT AI snippet just before the closing </body> tag.

Exemplo

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Angular App</title> </head> <body> <app-root></app-root> <script> localStorage.setItem('seatext_id', "96733aab-aaad-4e0e-90ec-5c899e524514"); window.globalSeatextID = "96733aab-aaad-4e0e-90ec-5c899e524514"; </script> <script async src="https://login.seatext.com/seatext.js?id=96733aab-aaad-4e0e-90ec-5c899e524514"></script> </body> </html>

Considerações Adicionais

Additional ConsiderationsAsynchronous Loading: The snippet includes the async attribute for the script tag, ensuring that the SEATEXT AI script loads asynchronously, which helps in maintaining page load performance. Local Storage Usage: The script stores an ID in the local storage. Ensure that your application has the necessary permissions to access and use local storage. Cross-Origin Considerations: If your SPA interacts with multiple domains, ensure that the SEATEXT AI script is compatible and does not face cross-origin issues.

Testando a Integração

After adding the snippet, follow these steps to ensure it integrates correctly: Build and Serve: Build and serve your application using the standard commands for your framework (npm start, npm run serve, or ng serve). Inspect the Page: Open your browser's Developer Tools (F12) and check the Console and Network tabs to verify that the SEATEXT AI script loads without errors. Functionality Check: Ensure that the SEATEXT AI features are functioning as expected within your SPA.

Conclusão

Seguindo este guia passo a passo, você pode integrar perfeitamente o snippet JavaScript do SEATEXT AI à sua Single Page Application. Se você encontrar algum problema ou precisar de mais assistência, entre em contato para obter suporte.