# **🔍 Overview**

Loveable is an AI-powered website builder that generates and hosts websites using its own infrastructure. Because Loveable does not offer a native plugin directory or direct CMS access in the traditional sense, connecting it to Search Atlas via OTTO requires the **custom installation** method — which lets you add OTTO's tracking pixel manually to your site's code.

This article walks you through everything you need to know to complete that connection successfully.

# **✅ Compatibility at a Glance**

- **Supported:** Loveable AI sites that allow custom code injection into the **<head>** section.
- **Not supported:** Loveable sites where you cannot access or modify the underlying HTML.
- **Requirement:** Your Loveable site must allow adding a custom script snippet to the site's global HTML head.

# **⚙️ Before You Begin**

Make sure you have the following ready before starting:

- An active Search Atlas account with OTTO enabled.
- A published website built with Loveable.
- Access to your Loveable project's code editor (available inside the Loveable builder interface).

# **🚀 Step 1 — Add Your Site to OTTO**

1. Log in to Search Atlas and go to **OTTO SEO → All Sites (SEO Automation)**.
2. Click **Create** to add a new site, then enter your Loveable website's URL.
3. Once the site is created, click on it to open the site dashboard.
4. Navigate to **Left sidebar → OTTO SEO → Installation Guide**.
5. Click **Continue installation** to open the installation onboarding modal.

# **📋 Step 2 — Copy Your OTTO Pixel Code**

1. Inside the installation onboarding modal, locate the **Custom Installation** option.
2. Copy the OTTO pixel snippet provided. This is a short JavaScript code block unique to your site.
3. Optionally, use the **Use AI Assistant** tab or click **Copy AI Prompt** to generate step-by-step instructions tailored to your platform — this can be especially helpful when working with AI-built sites like Loveable.

# **💡 Step 3 — Add the Pixel to Your Loveable Site**

1. Open your project inside the Loveable builder.
2. Access the code editor or the custom code / HTML settings section of your project. In Loveable, you can typically instruct the AI assistant to inject a script into the **<head>** section of your site, or use any available "Custom Code" panel.
3. Paste the OTTO pixel snippet so that it loads within the **<head>** tags on every page of your site.
4. Save and republish your Loveable project to make the changes live.

**Tip:** If you are unsure how to add custom code in Loveable, you can paste the OTTO pixel into Loveable's built-in AI chat and ask it to insert the script into the site's <head>. The **Copy AI Prompt** feature inside the OTTO installation modal generates a ready-made prompt you can use for exactly this purpose.

# **✅ Step 4 — Verify the Installation**

1. Return to Search Atlas and go to **Left sidebar → OTTO SEO → Installation Guide**.
2. Click **Continue installation** and follow the on-screen verification steps.
3. Search Atlas will check whether the pixel is live on your site. This can take a few minutes after you republish in Loveable.
4. Once verified, OTTO will begin scanning your site. You can monitor progress under **Left sidebar → OTTO SEO → Crawl Monitoring**.

# **⚠️ Common Issues and Tips**

- **Pixel not detected:** Make sure you republished your Loveable project after adding the code. Unpublished changes will not be visible to OTTO.
- **Code placement:** The pixel must be in the **<head>** section, not the footer or body, for reliable detection.
- **Site not scanning:** Wait 5–10 minutes after a successful verification before expecting crawl data to appear. You can trigger a manual scan from **Left sidebar → OTTO SEO → Overview** by clicking **Scan**.
- **Loveable code access:** If your Loveable plan does not include code editing features, you may need to upgrade your Loveable subscription to access custom code injection.

# **💬 Need More Help?**

If you need further assistance, open the chat widget in the bottom-right corner of the platform and type **human teammate** to be connected with a member of our team.