​
Step 1: Setting Up Your Recomi AI Agent

To embed a Recomi AI agent into your Framer website, 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 Framer website.

​
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 Framer Website

  1. After copying the embed code, log into your Framer account and access your dashboard.

  2. Click on the website project you wish to embed your Recomi AI agent.

  1. After clicking through to open the website project, locate the page you wish to embed your AI agent on the left side of the editor and click the three-dot icon next to the name of the page.

  1. Click Settings to open the Settings for that page.

  2. On the Settings page, scroll down to find the section labeled Custom Code.

  3. Right under the Custom Code section, paste your Recomi AI agent embed code in the first box labeled “End of <body> tag” and click Save on the top right corner of the panel. Then you can publish the page to see the AI agent in action. (Notes: you must Publish the page to see the AI agent in action, Preview will not show the AI agent. If you don’t see the AI agent icon, please refresh the page. For the topic of Framer Custom Code, please refer to the tutorial video here.)

  1. If everything was done well, you should now see a floating AI agent icon on the bottom left corner of your Framer website (on the page you added it to)

Congratulations! Your Recomi AI agent is now successfully integrated into your Framer website.

​
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
Integrate Recomi AI Agent with BubbleIntegrate Recomi AI Agent with Hostinger