​
Step 1: Setting Up Your Recomi AI Agent

To embed a Recomi AI agent into your Bubble application, start by logging into your Recomi account. If you don’t have an account yet, you can create one for free. After logging in, configure your agent within the Recomi platform by uploading relevant data sources, such as text file, documents, which will help the agent build its knowledge base. Follow these steps to ensure a smooth integration of your Recomi AI agent into your Bubble app.

​
Step 2: Generate and Copy Your Recomi AI Agent Embed Code

  1. Every agent created in Recomi comes with a unique embed code that allows it to be integrated into your website or application. Once your agent is set up, navigate to the Dashboard and select the specific agent you want to integrate with Bubble.
  1. Clicking on the agent will take you to its agent detailed page. From here, go to the Integration section.
  2. On this page, you will find the option of Embed a chat bubble to Copy Script. Click this button to copy the agent’s embed SDK Code.

​
Step 3: Embedding the Recomi AI Agent into Your Bubble Application

  1. After copying the embed code, log into your Bubble account and access your dashboard.
  1. Select the Bubble app or website where you want to integrate the agent, then click on the Launch Editor button.
  1. In the Bubble Editor, navigate to the section of the page where you want the agent to appear.
  2. On the left-side panel of the editor, locate the HTML component and drag it onto the page.
  1. Double-click on the HTML component to open the code editor.
  2. Paste the copied embed code into the editor. Once done, a floating agent icon should appear on the bottom left of the editor preview.
  1. You can now preview your Bubble application to test the agent’s functionality.
Congratulations! Your Recomi AI agent is now successfully integrated into your Bubble app.

​
Customizing Your Recomi AI Agent

To personalize the appearance of your agent, go to your Recomi dashboard, select the agent you want to modify, and navigate to the Playground and Settings tab. You’ll find various customization options to adjust the agent to match your branding and service:
  • agent response language
  • preset questions
  • welcome message
  • avatar and icon
  • colors and visual style