Framer

In this tutorial, we will show you how to integrate your AI Agent into Framer. This integration is only available for the chatbox version of your Agent, not "Bubble".

1. Access and log in to your Framer account, you can do it here.

2. Once inside the Framer Dashboard, create a new project or click on an existing project.

3. Look for the "Assets" option in the left sidebar menu and click on "Code".

4. ***Create a new component and give it a name.

You will see a default code here.

1. Delete it and paste the one we provide you, you can access it from the Caleida Dashboard, under advanced integrations and within the Framer configuration. This code supports the style changes you make to your Agent, so you won't have to change it again every time you edit your Agent.

1. Once you've done this, you'll need to return to the main page by clicking on "Home" and then click on "Assets" again.

2. Now, in the "Components" section, a new one called "Caliope_Agent_desktop" should appear.

3. Drag it onto your page, Stack, or Frame, and you're all set.