Skip to content

Integre a Braze com os aplicativos ChatGPT

Este guia aborda como integrar a Braze com os aplicativos ChatGPT para ativar a análise de dados e o registro de eventos em aplicativos com tecnologia de IA.

Um Content Card integrado ao app ChatGPT.

Visão geral

Os aplicativos ChatGPT oferecem uma plataforma poderosa para a criação de aplicativos conversacionais de IA. Ao integrar a Braze ao seu aplicativo ChatGPT, você pode continuar a manter o controle dos dados primários na era da IA, incluindo como:

  • Acompanhar o engajamento e o comportamento dos usuários em seu app ChatGPT (por exemplo, identificando quais perguntas ou recursos de bate-papo seus clientes utilizam)
  • Segmentar e redirecionar Campaigns da Braze com base em padrões de interação de IA (como o envio de e-mails para usuários que utilizaram o chat mais de três vezes por semana)

Principais benefícios

  • Seja dono da jornada do seu cliente: Enquanto os usuários interagem com sua marca por meio do ChatGPT, você mantém visibilidade sobre o comportamento, as preferências e os padrões de engajamento deles. Esses dados fluem diretamente para os perfis de usuário da Braze, não apenas para a análise de dados da plataforma de IA.
  • Redirecionamento entre plataformas: Acompanhe as interações dos usuários em seu aplicativo ChatGPT e redirecione-os em seus canais proprietários (e-mail, SMS, notificações por push, mensagens no app) com Campaigns personalizadas com base em seus padrões de uso de IA.
  • Retorne conteúdo promocional 1:1 para conversas no ChatGPT: Entregue mensagens no app da Braze, Content Cards e muito mais diretamente na sua experiência ChatGPT usando os componentes personalizados da interface de usuário conversacional que sua equipe criou para o seu app.
  • Atribuição de receita: Acompanhe as compras e conversões originadas das interações com o app ChatGPT.

Pré-requisitos

Antes de integrar a Braze ao seu aplicativo ChatGPT, você deve ter o seguinte:

Integração do app ChatGPT

Configuração

Etapa 1: Obtenha o arquivo de integração da Braze

Copie o arquivo braze.js do nosso repositório de integração de apps ChatGPT para o seu projeto. Este arquivo contém toda a configuração necessária do SDK da Braze e funções auxiliares.

Etapa 2: Instale as dependências

Instale nosso Web SDK para o conjunto mais atualizado de recursos da Braze:

Para integração do lado do cliente:

1

npm install @braze/web-sdk

Implementation

There are two ways to integrate Braze with your ChatGPT app depending on your use case:

Client-side integration (custom widgets)

For displaying Braze messaging and tracking user interactions within your custom ChatGPT app widgets, use the Web SDK integration. A full messaging example can be found in our sample repository here.

Configure widget metadata

Add the following metadata to your MCP server file to allow Braze domains, ensuring to update the CDN domain based on your region:

1
2
3
4
5
6
7
8
9

"openai/widgetCSP": {
  connect_domains: ["https://YOUR-SDK-ENDPOINT"],
  resource_domains: [
    "https://appboy-images.com",
    "https://braze-images.com",
    "https://cdn.braze.eu",
    "https://use.fontawesome.com"
  ],
}

Substitua YOUR-SDK-ENDPOINT pelo seu endpoint real do SDK da Braze.

Configure o hook useBraze

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { useBraze } from "./utils/braze";

function YourWidget() {
  const braze = useBraze({
    apiKey: "your-braze-api-key",
    baseUrl: "your-braze-endpoint.braze.com",
  });

  useEffect(() => {
    if (!braze.isInitialized) {
      return;
    }

    // Set user identity
    braze.changeUser("user-id-123");

    // Log widget interactions
    braze.logCustomEvent("viewed_pizzaz_list");
  }, [braze.isInitialized]);

  return (
    // Your widget JSX
  );
}

Exiba Content Cards da Braze

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

const [cards, setCards] = useState([]);

useEffect(() => {
  // Get cached content cards
  setCards(braze.getCachedContentCards()?.cards ?? []);

  // Subscribe to content card updates
  braze.subscribeToContentCardsUpdates((contentCards) => {
    setCards(contentCards.cards);
  });

  // Open session
  braze.openSession();

  return () => {
    braze.removeAllSubscriptions();
  }
}, []);

Rastreie eventos do widget

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Track user interactions within your widget
const handleButtonClick = () => {
  braze.logCustomEvent("widget_button_clicked", {
    button_type: "save_list",
    widget_name: "pizza_list"
  });
};

const handleItemInteraction = (itemId) => {
  braze.logCustomEvent("item_interacted", {
    item_id: itemId,
    interaction_type: "view_details"
  });
};

Integração do lado do servidor (servidor MCP)

Se você também precisar de uma integração do lado do servidor para funcionalidade de envio de mensagens no seu servidor MCP, entre em contato com [email protected]. Para rastreamento de eventos e compras do seu servidor MCP, use nossa REST API.
New Stuff!