> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sketricgen.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Deploy to Framer

> Embed a SketricGen AI agent chat widget on your Framer website — step-by-step guide for integrating agentic workflow automations.

This guide walks you through integrating your SketricGen agent workflow with your Framer website using the chat widget embed code.

## Step 1: Create Your SketricGen Account

To get started with the integration, [sign in to your SketricGen account](https://www.sketricgen.ai). If you don't have an account yet, you can [create one for free](https://www.sketricgen.ai/signup).

Once you're logged in, begin setting up your agent workflow by uploading your data sources. These can include files, text snippets, websites, or Q\&A pairs, which will serve as the knowledge base for your agent workflow.

If you need assistance with setting up a working SketricGen agent workflow, refer to our [step-by-step guide](https://docs.sketricgen.ai/getting-started/quickstart) for creating and deploying your agent workflow.

## Step 2: Copy the SketricGen Agent Embed Code

After configuring your agent workflow, go to your agent workflow's dashboard and click on **Publish** to copy the embed code.

**Important:** Ensure your agent workflow is set to **Public** in order to add it to your Framer website.

<img src="https://mintcdn.com/sketricgen/uWFxclrCayuxwaUt/images/framer/screenshot1.png?fit=max&auto=format&n=uWFxclrCayuxwaUt&q=85&s=b816b097f04f9e68af0c70bf044433d6" alt="Screenshot showing SketricGen dashboard with Publish button and embed code copy option for the agent workflow" width="2291" height="1117" data-path="images/framer/screenshot1.png" />

## Step 3: Add Code to Your Framer Site

### Access Site Settings

1. Log in to your Framer account and open the site where you want the SketricGen Chat Widget to appear
2. Navigate to **Site Settings**

<img src="https://mintcdn.com/sketricgen/uWFxclrCayuxwaUt/images/framer/screenshot2.png?fit=max&auto=format&n=uWFxclrCayuxwaUt&q=85&s=b3b1981982a21e31a5182a35da26ebd4" alt="Screenshot showing Framer Site Settings menu where Custom Code can be added" width="2265" height="1129" data-path="images/framer/screenshot2.png" />

### Insert Custom Code

1. Go to the **Custom Code** section in site settings
2. Paste the embed code you copied in Step 2
3. Click **Save**

<img src="https://mintcdn.com/sketricgen/uWFxclrCayuxwaUt/images/framer/screenshot3.png?fit=max&auto=format&n=uWFxclrCayuxwaUt&q=85&s=067177a9d029cda88e408fc788d982b4" alt="Screenshot showing Framer Custom Code section with embed script pasted for SketricGen widget" width="2269" height="1127" data-path="images/framer/screenshot3.png" />

### Publish Your Changes

Publish your site to make the agent workflow widget live and visible to visitors.

## Step 4: Test Your Integration

After publishing, visit your Framer website to test the chat widget functionality.

<img src="https://mintcdn.com/sketricgen/uWFxclrCayuxwaUt/images/framer/screenshot4.png?fit=max&auto=format&n=uWFxclrCayuxwaUt&q=85&s=770bcd81ffdf73ccc7799c3e5bb349d5" alt="Screenshot showing SketricGen chat widget embedded and visible on a Framer website" width="2872" height="1426" data-path="images/framer/screenshot4.png" />

**Congratulations!** You have successfully integrated the SketricGen Chat Widget. Your visitors can now directly chat with your agent and get tailored responses.