Integrar a IA (sindy)

A Sindy é um componente de IA para auxiliar o usuário com perguntas e respostas. Ela usa comom base todo o conteúdo do Help Center.

Antes de continuar, tenha certeza que as pipelines de processamento dos dados foram finalizadas pelo menos uma vez.

O passo a passo de como inserir o script JS pode ser encontrado na documentação oficial.

Custom JS

Padrões utilizados pela NDD

Code/Custom JavaScript

sts.loadScript("https://sandvappsprodeastus.z13.web.core.windows.net/components/widget/helpcenter/index.js")
  .then(() => {
      window.chatbotMetadata = {
        tenant_name: "teste", // Nome do produto para realização do filtro de conteúdo
        vertical: "teste", // Filtro adicional para o conteúdo
        customData: {
          titleWidget: "Sindy (Teste)", // Nome do Chatbot
          primaryBgColor: "#9622B2", // Cor de fundo do botão e do header
          primaryTextColor: "#fff", // Cor primária do ícone do botão e do texto do header
          positionBottom: "120px", // Distância do fundo do botão
          positionRight: "30px", // Distância da direita do botão
          iconSvg: "<svg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 24 24' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'><path d='M17 2H13V1H11V2H7C5.34315 2 4 3.34315 4 5V8C4 10.7614 6.23858 13 9 13H15C17.7614 13 20 10.7614 20 8V5C20 3.34315 18.6569 2 17 2ZM11 7.5C11 8.32843 10.3284 9 9.5 9C8.67157 9 8 8.32843 8 7.5C8 6.67157 8.67157 6 9.5 6C10.3284 6 11 6.67157 11 7.5ZM16 7.5C16 8.32843 15.3284 9 14.5 9C13.6716 9 13 8.32843 13 7.5C13 6.67157 13.6716 6 14.5 6C15.3284 6 16 6.67157 16 7.5ZM4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H4Z'></path></svg>"
        },
        // Perguntas de exemplo para mostrar no Widget
        starterPrompts: [
          {
            pt: "Quero ajuda para configurar meu dispositivo",
            en: "I want help setting up my device",
            es: "Quiero ayuda para configurar mi dispositivo"
          },
          {
            pt: "Meu dispositivo não está funcionando",
            en: "My device is not working",
            es: "Mi dispositivo no funciona"
          },
          {
            pt: "Explique este manual",
            en: "Explain this manual",
            es: "Explica este manual"
          },
          {
            pt: "Como atualizar o dispositivo?",
            en: "How do I update my device?",
            es: "¿Cómo actualizo mi dispositivo?"
          }
        ]
      };
  })
  .catch((error) => {
    console.error("Erro ao carregar o Widget de IA:", error);
  });

Configurações

tenant_name: Nome do produto para realização do filtro de conteúdo
vertical: Filtro adicional para o conteúdo
titleWidget: Nome para o Widget
primaryBgColor: Cor de fundo do botão e do header
primaryTextColor: Cor do ícone do botão e do texto do header
positionBottom: Distância do botão do fundo do site
positionRight: Distância do botão do fundo do site
iconSvg: Ícone do Widget

o iconSvg é obrigatório ser um código svg além de ter os seus parâmetros com aspas simples ‘'. Se houver cores configuradas, deve ter o valor 'currentColor’.

Exemplo:

iconSvg: "<svg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 24 24' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'><path d='M17 2H13V1H11V2H7C5.34315 2 4 3.34315 4 5V8C4 10.7614 6.23858 13 9 13H15C17.7614 13 20 10.7614 20 8V5C20 3.34315 18.6569 2 17 2ZM11 7.5C11 8.32843 10.3284 9 9.5 9C8.67157 9 8 8.32843 8 7.5C8 6.67157 8.67157 6 9.5 6C10.3284 6 11 6.67157 11 7.5ZM16 7.5C16 8.32843 15.3284 9 14.5 9C13.6716 9 13 8.32843 13 7.5C13 6.67157 13.6716 6 14.5 6C15.3284 6 16 6.67157 16 7.5ZM4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H4Z'></path></svg>"

starterPrompts: Perguntas de exemplo para mostrar no Widget.

Help Centers que tem apenas o idioma em PT, devem preencher apenas a pergunta em “pt”.

Encontrou algum problema? Procure o administrador Paulo Henrique Paixão.

Próximos passos

Realizar as integrações