Install the Required Plugin in Bubble

• Open your Bubble application and navigate to the “Plugins” tab on the left-hand menu.
• Click on the “Add Plugins” button.
• Search for the "API Connector" plugin developed by Bubble, and install it.

Set Up Google Cloud and Enable CCAI Insights API

• Go to the Google Cloud Console.
• Create a new project by clicking the project dropdown on the top left and selecting "New Project".
• Click “ENABLE APIS AND SERVICES” and search for the “Contact Center AI Insights API.”
• Enable the API for your project.
• Navigate to “APIs & Services” followed by "Credentials."
• Create OAuth 2.0 or API key credentials, depending on your security and access needs.
• Download the JSON key file for safe storage and integration.

Configure API Connector in Bubble

• Open the “API Connector” plugin in your Bubble app.
• Click “Add another API” and name it “CCAI Insights”.
• Add a new API call and configure the necessary settings.

Set Up API Call

• For "Authentication", choose "OAuth2 Custom Token" or "Bearer Token" based on your Google Cloud settings.
• In the API Endpoints section:
  • Method: POST
  • URL: https://ccaiinsights.googleapis.com/v1/projects/{project-id}/locations/{region}/insightsdata
• In the “Headers” section, include:
  • Authorization: Bearer YOUR_ACCESS_TOKEN (replace with your actual access token)
  • Content-Type: application/json
• In the “Body” section, configure your JSON payload as required by CCAI Insights. Example:

  {
    "conversation": {
      "transcript": {
        "message\_text": "Hello, how can I help you today?"
      }
    }
  }

• Click "Initialize Call" to test the configuration and ensure it is set up correctly.

Creating Workflow and Using the API

• Navigate to the “Workflow” tab in your Bubble application.
• Create a new workflow based on an event, such as a button click.
• Add an action to “Data” and choose “API Connector”.
• Select the initialized API call you want to use (e.g., "CCAI Insights").
• Set any dynamic values or parameters if needed to customize the API request.

Displaying the Results

• Go to the “Design” tab of your Bubble app to build the UI for displaying CCAI Insights data.
• Use appropriate elements, such as text or repeating groups, to show the returned data from the API call.
• Bind the UI elements to the response fields of the API call results.

Testing the Integration

• Run your Bubble application in preview mode.
• Execute the workflow event which triggers the API call to CCAI Insights.
• Verify that the expected data is returned and displayed correctly according to your designed UI.
• Troubleshoot any issues by checking API response codes and messages.

Securing Your Integration

• Ensure that sensitive data, such as API keys and tokens, are securely stored and not exposed in the app or logs.
• Regularly rotate your API credentials and tokens to maintain security.
• Monitor your usage and access patterns on the Google Cloud Console to detect any anomalies.