# AGENTS
Source: https://docs.readdy.ai/AGENTS



# Repository Agent Instructions

This repository contains the Mintlify-powered help docs for [Readdy](https://readdy.ai), published at [https://docs.readdy.ai](https://docs.readdy.ai). Pages are authored as `.mdx` files under `features/` and `integrations/`; navigation is configured in `docs.json`.

## Writing or editing help docs

When creating or editing any file under `features/` or `integrations/`, **read and follow** the Readdy help doc writing guide first:

```
.claude/skills/readdy-help-doc/SKILL.md
```

That guide encodes the team's conventions:

* Frontmatter fields and casing (`title`, `description`, `sidebarTitle`)
* Recurring section structure (Before You Start / How It Works / FAQ / Troubleshooting / Need Help?)
* Mintlify component usage (`Steps`, `Frame`, `Info`, `Warning`, `Tip`, `Accordion`, …)
* Image path, naming, and `<Frame>` wrapping rules
* Filename slug and `docs.json` navigation insertion rules
* The standard "Need Help?" footer template

Read the SKILL.md before drafting any new doc or making non-trivial edits. Don't introduce patterns not covered there without checking with the team.

## Local preview

```bash theme={null}
mintlify dev
```

Opens at [http://localhost:3000](http://localhost:3000).

## Branching

* New feature doc: `feat/<slug>-doc`
* Edits to live docs / fixes: `fix/<short-summary>` or `docs/<short-summary>`
* Cross-tool / repo config: `chore/<short-summary>`
* Merge into `main` to deploy via Mintlify (auto-deploys within \~1–3 minutes after push).


# CONTEXT ARCHIVE
Source: https://docs.readdy.ai/CONTEXT_ARCHIVE



# Mintlify 文档自动化项目 - 上下文存档

**存档时间**: 2026-01-22
**项目路径**: `/tmp/mintlify-docs-main`
**本地预览地址**: [http://localhost:3000](http://localhost:3000)

***

## 项目概述

这是一个基于 Mintlify 的文档自动化项目，为 Readdy（AI 网站构建工具）创建集成文档。

当前任务：为 **Resend 邮件服务集成** 编写帮助文档。

***

## 当前工作状态

### ✅ 已完成的工作

1. **创建了 Resend 集成文档**
   * 文件路径：`/tmp/mintlify-docs-main/integrations/resend.mdx`
   * 已添加到导航菜单（在 `docs.json` 中）
   * 文档位置：Integrations 分组，位于 Supabase 之后，Shopify 之前

2. **文档结构（4个主要部分）**
   * 第1节：基础配置（注册、连接 Supabase、获取 API Key）
   * 第2节：测试和验证（测试邮件 + 数据库验证 = 流程闭环）
   * 第3节：品牌化设置（可选 - 购买域名、DNS 验证）
   * 第4节：高级功能（可选 - AI Agent、日历预约）

3. **本地预览服务器**
   * 启动命令：`cd /tmp/mintlify-docs-main && npx mint dev`
   * 访问地址：[http://localhost:3000](http://localhost:3000)
   * 后台进程 ID：bb42076（可能已停止，需重新启动）

***

## 文档风格参考

项目位于：`/Users/shikexin/Downloads/mintlify-docs-main.zip`

### Mintlify 组件使用规范

```markdown theme={null}
# Frontmatter（必需）
---
title: "页面标题"
description: "页面描述"
sidebarTitle: "侧边栏显示的简短标题"
---

# 常用组件

## 1. 步骤引导
<Steps>
  <Step title="步骤标题">
    步骤内容...

    <Frame>
      <img src="/images/image-file.png" alt="图片描述" />
    </Frame>
  </Step>
</Steps>

## 2. 提示框
<Tip>提示内容</Tip>
<Info>信息内容</Info>
<Warning>警告内容</Warning>
<Danger>危险提示</Danger>
<Note>注意事项</Note>

## 3. 卡片
<Card title="卡片标题" href="链接地址">
  卡片描述内容...
</Card>

<CardGroup cols={2}>
  <Card title="卡片1">内容1</Card>
  <Card title="卡片2">内容2</Card>
</CardGroup>

## 4. 折叠区域
<Accordion title="标题">
  折叠内容...
</Accordion>

## 5. 帧容器（用于图片/视频）
<Frame caption="图片说明">
  <img src="/path/to/image.png" alt="描述" />
</Frame>

## 6. 视频嵌入
<Frame>
  <video
    autoPlay
    loop
    muted
    playsInline
    src="/images/video-file.mp4"
    alt="视频描述"
  />
</Frame>

## 7. 代码块
直接使用 markdown 的三个反引号
```

代码...

```

## 8. 表格
<table>
<thead>
  <tr>
    <th width="200">列1</th>
    <th width="300">列2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
  </tr>
</tbody>
</table>

## 9. 多列布局
<Columns cols={3} className="gap-y-4">
  <Frame caption="说明1">
    <img src="/images/img1.png" />
  </Frame>
  <Frame caption="说明2">
    <img src="/images/img2.png" />
  </Frame>
  <Frame caption="说明3">
    <img src="/images/img3.png" />
  </Frame>
</Columns>

## 10. 外部链接
使用 markdown 语法，添加 target 和 rel：
<a href="URL" target="_blank" rel="noopener noreferrer">链接文本</a>

## 11. 更新日志组件
<Update label="December 2025" description="简短描述">
  ✨ **New Features**
  - 新功能列表

  🚀 **Improvements**
  - 改进列表

  🐛 **Bug Fixes**
  - 修复列表
</Update>
```

***

## Resend 文档内容大纲

### 文件：`integrations/resend.mdx`

```markdown theme={null}
---
title: "Integrate with Resend"
description: "Add email functionality to your Readdy website using Resend for transactional emails and notifications"
sidebarTitle: "Resend"
---

## What is Resend?
- 介绍 Resend 是什么
- 可以实现的功能（预约确认邮件、预订通知等）

## Before You Start
- 需要准备的条件（Resend 账号、Supabase 连接）

## 1. Basic Configuration
<Steps>
  Step 1: Sign Up for Resend
  Step 2: Connect Supabase Database
  Step 3: Get Your Resend API Key
  Step 4: Connect Resend to Readdy
</Steps>

## 2. Testing and Verification（包含流程闭环）
<Steps>
  Step 1: Enable Email in Readdy
  Step 2: Test the Booking Flow
  Step 3: Verify Email Delivery（流程闭环第一步）
  Step 4: Check Database Records（流程闭环第二步）
</Steps>

## 3. Branding Setup (Optional)
<Accordion title="Why Verify Your Domain?">
  品牌域名的优势
</Accordion>

<Steps>
  Step 1: Purchase a Domain
  Step 2: Add Domain in Resend
  Step 3: Configure DNS Records
  Step 4: Verify Domain
  Step 5: Update Email Sender in Readdy
</Steps>

## 4. Advanced Features (Optional)
### AI Agent Integration
### Calendar Scheduling

## Troubleshooting
### Email Not Sending
### Email Not Arriving
### Database Not Recording Bookings

## Need Help?
联系方式
```

***

## 待完成的任务

### 📋 必需任务

1. **准备图片资源**

   * 需要的截图列表（当前都使用了占位路径）：
     * `/images/resend-signup.png` - Resend 注册页面
     * `/images/resend-api-key.png` - API Key 创建界面
     * `/images/resend-integration-entry.png` - 集成入口
     * `/images/resend-connect-api.png` - 连接 API 界面
     * `/images/resend-test-booking.png` - 测试预约表单
     * `/images/resend-email-received.png` - 收到确认邮件
     * `/images/resend-supabase-records.png` - Supabase 数据库记录
     * `/images/resend-add-domain.png` - 添加域名
     * `/images/resend-dns-records.png` - DNS 记录
     * `/images/resend-verify-domain.png` - 验证域名
     * `/images/resend-logs.png` - Resend 日志

   **操作**：将截图放入 `/tmp/mintlify-docs-main/images/` 目录

2. **测试文档预览**
   * 确保所有链接可点击
   * 验证组件正确渲染
   * 检查移动端显示效果

### 🔄 可选优化

1. **内容精简**
   * 根据实际需求调整内容详细程度
   * 添加更具体的示例

2. **样式调整**
   * 优化表格显示
   * 调整图片大小和说明

3. **SEO 优化**
   * 检查 meta description
   * 添加关键词

***

## 重要配置文件

### docs.json 配置

```json theme={null}
{
  "navigation": {
    "groups": [
      {
        "group": "Integrations",
        "pages": [
          "integrations/readdy-agent",
          "integrations/supabase",
          "integrations/resend",    // ← 新添加的
          "integrations/shopify",
          "integrations/stripe",
          // ... 其他集成
        ]
      }
    ]
  }
}
```

***

## 下次工作指南

### 如何继续工作

1. **打开项目**
   ```bash theme={null}
   cd /tmp/mintlify-docs-main
   ```

2. **启动预览服务器**
   ```bash theme={null}
   npx mint dev
   ```

3. **访问预览**
   * 打开浏览器访问：[http://localhost:3000](http://localhost:3000)
   * 导航到：Integrations → Resend

4. **在 Cursor 中编辑**
   * 使用 Cursor 打开整个 `/tmp/mintlify-docs-main` 目录
   * 编辑 `integrations/resend.mdx` 文件
   * 保存后浏览器会自动刷新

### 给 AI 的提示

如果下次需要继续编辑这个文档，请这样告诉 AI：

```
我正在继续之前的 Mintlify 文档项目。项目位于 /tmp/mintlify-docs-main

请阅读以下文件：
1. /tmp/mintlify-docs-main/integrations/resend.mdx（当前正在编辑的文档）
2. /tmp/mintlify-docs-main/integrations/stripe.mdx（参考格式）
3. /tmp/mintlify-docs-main/integrations/calendly.mdx（参考格式）

帮我：[具体需求]
```

***

## 项目文件结构

```
/tmp/mintlify-docs-main/
├── docs.json                          # 主配置文件（已更新）
├── README.md
├── intro.mdx
├── welcome.mdx
├── firstapp.mdx
├── changelog.mdx
├── favicon.svg
├── logo/
│   ├── light.svg
│   └── dark.svg
├── images/                            # 图片资源目录（需添加截图）
├── integrations/                      # 集成文档目录
│   ├── readdy-agent.mdx
│   ├── supabase.mdx
│   ├── resend.mdx                     # ← 新创建的文档
│   ├── shopify.mdx
│   ├── stripe.mdx                      # ← 参考格式
│   ├── figma.mdx
│   ├── ga.mdx
│   ├── calendly.mdx                    # ← 参考格式
│   ├── mailchimp.mdx
│   └── google-login.mdx
├── features/
├── tricks/
├── account/
├── cases/
├── troubleshooting/
└── more/
```

***

## 相关文档参考

### 优秀的集成文档示例

1. **Stripe 集成** (`integrations/stripe.mdx`)
   * 详细的步骤说明
   * 清晰的权限表格
   * 完整的注意事项

2. **Calendly 集成** (`integrations/calendly.mdx`)
   * 简洁的步骤
   * 丰富的图片演示
   * 清晰的操作流程

3. **Supabase 集成** (`integrations/supabase.mdx`)
   * 复杂集成的完整示例
   * 多个功能模块

***

## 技术栈

* **文档框架**: Mintlify
* **格式**: MDX (Markdown + JSX)
* **本地预览**: `npx mint dev`
* **配置文件**: docs.json

***

## 联系方式与支持

* 项目支持邮箱：[hi@readdy.ai](mailto:hi@readdy.ai)
* Mintlify 官方文档：[https://mintlify.com/docs](https://mintlify.com/docs)

***

## 快速命令参考

```bash theme={null}
# 启动预览
cd /tmp/mintlify-docs-main && npx mint dev

# 停止预览：在终端按 Ctrl+C

# 查看项目结构
ls -la /tmp/mintlify-docs-main/

# 查看集成文档
ls -la /tmp/mintlify-docs-main/integrations/

# 查看图片资源
ls -la /tmp/mintlify-docs-main/images/
```

***

## 最后更新

* **日期**: 2026-01-22
* **状态**: Resend 文档初稿已完成，等待图片资源和测试
* **下一步**: 准备截图，完善视觉内容

***

*此文件用于在 Cursor 中打开，以便 AI 读取上下文并继续工作*


# Billing & Invoices
Source: https://docs.readdy.ai/account/billing

Manage your Readdy subscription billing, check credit usage, view invoices, and track monthly limits

## Check your usage

You can check your usage on the Subscription page. You can reach this page by clicking **Avatar** > **Subscription**. 5950/6000 means you have 5950 credits remaining out of 6000 total credits.
Credits reset each month on your subscription date.

<Frame>
  <img />
</Frame>

## Finding your invoices

We make it easy to manage your billing documentation. All your invoices are available in your account dashboard, where you can view them online or download them as PDFs.

<Frame>
  <img />
</Frame>


# Credit Consumption Rules
Source: https://docs.readdy.ai/account/credit

In Readdy, different features consume varying amounts of credits based on their complexity and the computing resources required. The following breakdown explains how credits are used across features, helping you manage your resources more efficiently.

### AI Generation and Editing

* Each **Generate** action: consumes **25 credits**
* Each **Edit** action: consumes **25 credits**

***

### Integrations

Readdy supports integrations with a variety of third-party platforms, including but not limited to:

* **Supabase**
* **Stripe**
* **Shopify**
* **Calendly**
* **Mailchimp**
* **Google Analytics**

Each time you connect an integration: **25 credits** will be consumed.

💡 **Notes:**

* If you have multiple projects under the same account, each project must set up integrations separately, and credits will be consumed for each setup.
* For **Supabase**, connecting your Supabase **account** does not consume credits — only connecting to or switching between specific **projects** will.

***

### SEO Editing

Readdy offers a dedicated SEO panel to help you optimize your website for search engines, including metadata, keywords, titles, and descriptions.

* Each time you generate new SEO content: **25 credits** will be consumed.

💡 **Notes:**

* SEO settings are applied **per project**.
* If you manage multiple projects, SEO needs to be configured separately for each, and credits will be consumed for each configuration.

***

### Image and Video Processing (via Selector)

When using the **Selector** tool to choose a page element, an operation panel will appear that supports various image and video operations:

* **Remove Background:** consumes **10 credits** per use
* **Generate Background:** consumes **50 credits** per use
* **Generate Video:** consumes **150 credits** per use

***

### Link / Text / Image Editing (via Selector)

You can edit links, text, and images in batches using the Selector. Each instruction supports up to **five changes**.\
**Each instruction consumes 25 credits**, regardless of how many changes are included.

***

### Auto Fix

* The **Auto Fix** feature is now **completely free** and no longer consumes any credits.

***

If you have further questions, feel free to contact the **Readdy Support Team**.  We recommend planning your credit usage based on your project needs to make the most of all Readdy features.


# Subscription FAQs
Source: https://docs.readdy.ai/account/faqs

Frequently asked questions about Readdy subscriptions, credits, billing, and account management

## Credits and Billing

<Accordion title="I've used up all my credits, but my subscription hasn't expired. What should I do?">
  If you’re on our Starter Plan, you can upgrade to the Pro Plan for immediate access to more credits. If you’re already on the Pro Plan, you can still remain on your current plan. To continue, please go to the **Subscription** page and choose a plan that fits your needs — you’ll find all available options displayed as shown in the screenshot below.

  <Frame>
    <img alt="" />
  </Frame>
</Accordion>

<Accordion title="When do my credits reset?">
  Credits reset automatically at the end of each billing cycle. The number of new credits will depend on your current subscription plan. You can check the reset time for your billing cycle here:

  <Frame>
    <img alt="" />
  </Frame>
</Accordion>

<Accordion title="When does my subscription end?">
  Your subscription ends at the end of the next billing cycle after the day you purchased the plan. For example, if you subscribed on June 12, your subscription will end on July 12.

  You can also check your plan's expiration date and see when it will switch to the Free plan on the Billing page.

  <Frame>
    <img alt="" />
  </Frame>
</Accordion>

## Projects and Plans

<Accordion title="Will my existing projects be deleted if I downgrade my subscription?">
  No. Your existing projects will remain intact. If the number of projects exceeds the limit of your new plan, you'll still be able to view and edit them, but you won't be able to create new ones until the total number falls within your new plan's limit.
</Accordion>

## Invoice Management

<Accordion title="How to modify the invoice information to company name and tax number">
  #### Open Billing Page

  Click your profile icon → Select **Billing** from the dropdown menu.

  <Frame>
    <img alt="" />
  </Frame>

  #### Click the Manage & Invoices button

  <Frame>
    <img alt="" />
  </Frame>

  #### Update Info

  Click Update Information

  <Frame>
    <img alt="" />
  </Frame>

  #### Edit Company Details

  Please double check all the information before you submit.

  <Frame>
    <img alt="" />
  </Frame>

  #### Save Changes

  Click Save to finalize updates.

  <Frame>
    <img alt="" />
  </Frame>

  After that, your invoice will be update in the next time.
</Accordion>

## Need Help?

If you have other questions not covered here, contact us at [hi@readdy.ai](mailto:hi@readdy.ai) or use our live chat. We're here to help!


# Host-only Plan
Source: https://docs.readdy.ai/account/host-only

Keep your published websites online at a lower cost when you no longer need a full building plan

Host-only is a lower-cost option for keeping published websites online when you no longer need a full building subscription. It is designed for websites that are already live and only need light maintenance.

## What Host-only is for

Host-only is a good fit if you:

* want to keep one or more published websites online
* only make small updates from time to time
* do not need the full set of building, export, or advanced collaboration tools in a regular subscription

## What you still get

With Host-only, you can continue using the parts of Readdy you need to keep a live website running, including:

* published website hosting
* custom domain and Readdy subdomain publishing
* 250 credits per month
* 10 projects
* 1GB file storage per project
* 1000 form submissions per month
* core site-running features such as Backend, Booking, and Social Media
* access to your existing projects for ongoing maintenance

Host-only is a lighter plan, so some advanced creation, developer, and agency features are not included.

## How pricing works

* Host-only starts at `$10/month`
* `1` Host-only subscription includes `1` published website
* If you keep more than `1` published website live, additional published websites are charged separately at `$10/site/month`
* Your actual next-cycle charge is based on how many websites are still published when Host-only starts

## What happens after you confirm

After you confirm the switch:

* your current subscription stays active until the current billing cycle ends
* Host-only is scheduled for the next billing cycle
* the final number of Host-only charges is calculated from the websites that are still published when the new cycle starts
* you may see a pending change reminder on the Subscription page before the switch takes effect

## Can you still edit projects on Host-only?

Yes, but editing still uses account credits.

This means:

* you can still make light updates with `250` credits per month
* if your available credits are too low for a generation, credit-based actions are blocked until you upgrade

Host-only is meant for maintenance, not for heavy building work.

## How to upgrade from Host-only to a regular subscription

You can upgrade from Host-only at any time from the **Subscription** page.

When you upgrade:

* the upgrade takes effect immediately
* Host-only stops once the new subscription starts
* if your current Host-only cycle still has remaining value, that value can be applied toward the new subscription based on Readdy's upgrade rules

## FAQ

<AccordionGroup>
  <Accordion title="Does Host-only start right away?">
    No. When you switch from a regular subscription to Host-only, the change takes effect at the start of your next billing cycle.
  </Accordion>

  <Accordion title="Is the price shown in the cancel flow final?">
    No. It is an estimate. The final charge is based on how many websites are still published when Host-only begins.
  </Accordion>

  <Accordion title="Why can my renewal bill be different from the estimate?">
    The estimate is based on your current published website count when you see the Host-only offer. If you publish or unpublish websites before the switch date, the final Host-only charge can change. If your current plan also has usage that is billed at renewal, that amount may appear on the same bill.
  </Accordion>

  <Accordion title="Can I use Host-only if I have no published website?">
    No. Host-only is only shown to users who already have at least one published website.
  </Accordion>

  <Accordion title="Can I still create a new project on Host-only?">
    Yes, but any generation or editing action still uses your account credits.
  </Accordion>

  <Accordion title="Can I get a refund if I unpublish a site after Host-only starts?">
    No. Unpublishing a site changes future billing, but it does not refund the current Host-only cycle.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Payment Issues
Source: https://docs.readdy.ai/account/payment-issues



## Having Trouble with Your Payment?

No worries — try these common fixes to complete your payment successfully:

### 1. Check Your Card Balance

Ensure your card has enough funds available.

### 2. Try a Different Card

Payments may sometimes be declined by your bank.

* Use another card to complete the payment
* If several cards don't work, contact us at [hi@readdy.ai](mailto:hi@readdy.ai)

## Noticing an Unexpected Charge from Readdy?

Here's how to verify and resolve it:

### 1. Check for Recent Activity

Did you start a trial, subscribe to a plan, or upgrade recently?

### 2. Confirm with Family or Teammates

Someone with account access may have made the purchase.

### 3. Review Your Billing History

Log in to Readdy > Click your avatar (top-right) > **Subscription** > **Manage Billing & Invoices** to see past invoices and payments.

### 4. Contact Your Bank or Card Provider

They may have more details about the charge.

### 5. Reach Out to Us

Still unsure? Email us at [hi@readdy.ai](mailto:hi@readdy.ai) — we're here to help.


# Plans & Pricing
Source: https://docs.readdy.ai/account/plans

Compare Readdy's pricing plans and choose the right subscription tier for your website building needs

## Understanding our plans

Readdy now offers 6 plan tiers in our V3 pricing system: **Free**, **Starter**, **Pro**, **Agency**, **Agency Pro \[White Label]**, and **Ultimate**.

### Free Plan

*For first-time users*

* 250 credits per month
* 1 project
* Best for trying core website generation before you publish or scale

### Starter Plan (\$25/month)

*For new builders*

* 2,500 credits per month
* 10 projects
* Including 1 live site
* Extra live sites cost \$10/site/month
* Includes Readdy Backend so you can power your site with built-in databases, functions, forms, and app logic
* Core website building and publishing features, including custom domain support, for getting your business online
* Includes AI Receptionist for live chat with your website visitors
* A good fit for freelancers, founders, and small business websites

### Pro Plan (\$40/month)

*For professional builders*

* 6,000 credits per month
* 50 projects
* Including 2 live sites
* Extra live sites cost \$10/site/month
* Includes Readdy Backend so you can power your site with built-in databases, functions, forms, and app logic
* Higher limits for forms, storage, collaboration, Credit Care, and AI Receptionist usage
* Adds advanced growth features like AI SEO Analysis and Branded Email via Resend

### Agency Plans (\$80/\$120/\$160 per month)

*For growing agencies*

* 12,000, 18,000, or 24,000 credits per month
* Including 200 projects
* Including 4/6/8 live sites
* Extra live sites cost \$10/site/month
* Includes Readdy Backend so you can power your site with built-in databases, functions, forms, and app logic
* Adds agency-focused tools like AEO/GEO, Outreach Campaign, and Client Management
* Best for teams that need more credits and agency workflow features before moving to white-label plans

### Agency Pro with White Label (\$199/\$299/\$499/\$799 per month)

*For agencies with unlimited credits*

* Unlimited credits and higher multi-site capacity
* Including 800 projects
* Including 10/30/60/120 live sites
* Extra live sites cost \$8 to \$5/site/month, depending on your tier
* Includes Readdy Backend so you can power your site with built-in databases, functions, forms, and app logic
* Includes white-label features like custom branding, custom platform or site domains, custom email templates, and branded client login
* Built for agencies delivering websites under their own brand

### Ultimate Plan (\$1,299/month)

*For enterprise agencies*

* Unlimited credits, unlimited projects and unlimited live sites
* No extra site purchase is needed because live sites are unlimited
* Includes Readdy Backend so you can power your site with built-in databases, functions, forms, and app logic
* The highest limits across storage, collaboration, and agency operations
* Best for large teams managing many client websites at scale

## Credit Usage

It costs **25 credits** every time you generate content or make an edit.

## Monthly vs Multi-Year Billing

Readdy offers monthly, 1-year, 2-year, and 3-year billing options.

Your credits refresh differently depending on your billing cycle:

* Monthly plans: credits refresh every month
* 1-year plans: all credits for the year are granted upfront in a single balance
* 2-year and 3-year plans: credits refresh once per subscription year

You can choose how you want to be billed:

<Columns>
  <Card title="Monthly Billing" icon="calendar">
    · Pay and auto-renew every month \
    · Credits refresh every month \
    · Switch to Free plan anytime
  </Card>

  <Card title="1-Year / 2-Year / 3-Year Billing" icon="calendars">
    · One-time payment for your selected term \
    · Save **40% / 50% / 60%** \
    · 1-year plans receive all yearly credits upfront \
    · 2-year and 3-year plans refresh credits once per year
  </Card>
</Columns>

<Columns>
  <Frame>
    <img alt="" />
  </Frame>

  <Frame>
    <img alt="" />
  </Frame>
</Columns>

<Note>
  1-year plans grant all yearly credits upfront. 2-year and 3-year plans refresh credits once per subscription year.
</Note>

### Compare Price

| Plan           | Pay **Monthly** | Pay **1 Year**<br />(Avg. per mo) | Pay **2 Years**<br />(Avg. per mo) | Pay **3 Years**<br />(Avg. per mo) |
| -------------- | --------------- | --------------------------------- | ---------------------------------- | ---------------------------------- |
| Starter        | \$25            | \$15                              | \$12.50                            | \$10                               |
| Pro            | \$40            | \$24                              | \$20                               | \$16                               |
| Agency 80      | \$80            | \$48                              | \$40                               | \$32                               |
| Agency 120     | \$120           | \$72                              | \$60                               | \$48                               |
| Agency 160     | \$160           | \$96                              | \$80                               | \$64                               |
| Agency Pro 199 | \$199           | \$119.40                          | \$99.50                            | \$79.60                            |
| Agency Pro 299 | \$299           | \$179.40                          | \$149.50                           | \$119.60                           |
| Agency Pro 499 | \$499           | \$299.40                          | \$249.50                           | \$199.60                           |
| Agency Pro 799 | \$799           | \$479.40                          | \$399.50                           | \$319.60                           |
| Ultimate       | \$1,299         | \$779.40                          | \$649.50                           | \$519.60                           |

We’re continuing to update our product to offer you even more features. You can always find the latest details of our plans by clicking **Avatar** > **Subscription**.

## Changing your plans

### Upgrading Your Plan

If you’re running out of credits, you can upgrade your plans at any time for immediate access to more credits. You can reach this page by clicking **Avatar** > **Subscription**.

Upgrades take effect immediately. Any unused credits from your current subscription will be converted based on their credit value and applied toward the bill for your new plan.

<Frame>
  <img alt="" />
</Frame>

### Reset Billing Cycle

For multi-year subscriptions, if your current billing period has not ended but your credit value has already been fully used, you can reset your billing cycle early and start the next subscription year in advance.

### Downgrading Your Plan

If you wish to downgrade your paid plans, you can make this change in Subscription page at any time. The change will take effect at the start of your next billing cycle.

For multi-year subscriptions, scheduled downgrades are only available during the final year of your current subscription term due to order processing limitations.

### Switch to Free Plan

If you want to stop your subscription, you’ll need to switch to your current plan first, then click **Manage Current Plan** to change it to the Free Plan. The change will take effect at the start of your next billing cycle.

You can also cancel your subscription directly from the option shown in the screenshot.

<img alt="manage-current-plan.png" title="manage-current-plan.png" />

You can also click **“Undo Switch Plan”** at any time if you change your mind.

<img alt="undo-switch-plan.png" />


# Use Cases
Source: https://docs.readdy.ai/cases/use-cases

Real-world examples and use cases for Readdy applications



# Changelog
Source: https://docs.readdy.ai/changelog

Planting seeds of possibility, byte by byte 🌱

<Update label="March 2026" description="Social Posts, Outreach Campaign, and GitHub integration! 🚀">
  ✨ **New Features**

  * [AI Social Posts](/features/social-media) - generate content for Facebook, Instagram, X, and LinkedIn from your website in one click
  * [Outreach Campaign](/features/outreach-campaign) - batch-generate landing pages and cold email campaigns for scalable outreach
  * [GitHub integration](/integrations/github) - connect a GitHub repository for version control and two-way code synchronization
  * [Resend + Supabase integration](/integrations/resend-supabase) - add transactional email functionality powered by Resend and Supabase
  * [Workspace](/features/workspace) - manage all your websites in one place, organized by clients or brands

  🚀 **Improvements**

  * Expanded domain TLD support including .web.id, .kg, uk.net, us.org, .app.br and more
  * Clearer conflict DNS record display during domain binding
  * Stripe integration now supports all project types, no longer limited to React

  🐛 **Bug Fixes**

  * Fixed SEO module availability and navigation display issues
  * Fixed GitHub permission verification issues
  * Fixed mobile interaction and input area issues
</Update>

<Update label="February 2026" description="Team collaboration and site diagnosis! 🤝">
  ✨ **New Features**

  * [Team Collaboration](/features/collaboration) - invite members, manage permissions, and work on projects together
  * [Notifications center](/features/notifications) - real-time updates for collaboration activity, invitations, and support responses
  * [Site Diagnosis](/features/site-diagnosis) - AI-powered website health checker analyzing SEO, performance, security, accessibility, and UX

  🚀 **Improvements**

  * Redesigned mobile domain record management UI and improved mobile purchase experience
  * Simplified message processing logic for better reliability
  * DNS configuration steps now show completion tracking and visual feedback
  * Dynamic state/region options based on domain provider during purchase

  🐛 **Bug Fixes**

  * Fixed real-time session locking, member notifications, and shared state sync in Team Collaboration
  * Fixed country/region data caching inconsistency causing domain purchase errors
  * Fixed template entry, mobile Japanese tooltip, and invite button UI issues
  * Fixed v1.0 project generation and page redirect issues
</Update>

<Update label="January 2026" description="Code Editor, Credit Guard, and Readdy Booking! ✏️">
  ✨ **New Features**

  * [Select to Edit & Quick Edit](/features/select-to-edit-and-quick-edit) - click any element on your page to edit it directly with precision
  * [Credit Care](/features/credit-care) - AI generation failure protection that refunds Credits when you discard unsatisfactory results
  * [Code Editor](/features/code-editor) - inspect every file, make direct edits, and export standalone production-ready projects
  * [Readdy Booking](/integrations/readdy-booking) - add booking calendars to your website so visitors can schedule appointments online

  🚀 **Improvements**

  * Domain purchase flow overhaul with multi-step forms, billing confirmation, and enhanced validation
  * Smart DNS TTL settings based on domain source for faster DNS propagation
  * Optimized selector interaction with updated visuals and tutorial guides
  * WebP asset optimization for improved page loading performance
  * Entri DNS Auto-Config - one-click DNS setup with conflict detection and adaptive prompts

  🐛 **Bug Fixes**

  * Fixed DNS provider parameter passing and type errors
  * Fixed fallback logic after successful domain publishing
  * Fixed TopBar and publish flow interaction issues
  * Fixed history message loading and generation error prompts
</Update>

<Update label="December 2025" description="Analytics and AI logo generation! 🎄">
  ✨ **New Features**

  * Website analytics dashboard - track visitor data and insights for your published projects
  * AI-powered logo generation - automatically create beautiful, professional logos tailored to your project

  🚀 **Improvements**

  * Email address update support - easily change your account email
  * Custom Readdy subdomain configuration - personalize your subdomain to match your brand
  * Enhanced text editing performance - faster and more responsive text modifications
  * Improved handling of complex projects with long code files - reduced error rates

  🐛 **Bug Fixes**

  * Fixed version switching issue when copying logs from other versions
</Update>

<Update label="November 2025" description="Readdy subdomains and global accessibility! 🌍">
  ✨ **New Features**

  * Readdy subdomain for instant website publishing - if you don't have a custom domain, you can use a Readdy-provided subdomain to publish your website quickly
  * Multilingual support, making Readdy accessible to users worldwide
  * Enhanced auto-fix capabilities with smarter problem resolution

  🚀 **Improvements**

  * Improved mobile experience for seamless on-the-go usage
  * Interactive feature tutorials for new users with step-by-step guidance
  * Enhanced UI generation quality with more polished and visually appealing designs

  🐛 **Bug Fixes**

  * Fixed issues in the domain purchase and binding workflow
  * Fixed mobile sidebar and page loading sequence issues
</Update>

<Update label="October 2025" description="Community engagement and quality enhancements! 🎯">
  ✨ **New Features**

  * Social media sharing rewards - earn points by sharing your creations on social platforms

  🚀 **Improvements**

  * Generation feedback system - rate and provide feedback on generated versions
  * Enhanced bug fix workflow with significantly reduced error rates
</Update>

<Update label="September 2025" description="AI assistant and enhanced experience! 🤖">
  ✨ **New Features**

  * [Readdy Agent](/integrations/readdy-agent) - AI-powered chat and voice assistant for your website to enhance customer engagement

  🚀 **Improvements**

  * Smart position memory - automatically returns to your last preview page and location
  * Expanded input character limit to 5000 for more detailed requirements
  * Advanced spam filtering for form submissions
  * Version management with deletion support
  * Streamlined domain binding process for faster deployment
</Update>

<Update label="August 2025" description="Integration powerhouse and seamless workflows! 🔗">
  ✨ **New Features**

  * [Supabase integration](/integrations/supabase) for seamless backend connectivity and database management
  * [Direct domain purchase support](/features/publish-purchase-domain) for easier site deployment and management
  * [Shopify integration](/integrations/shopify) for importing products and store data
  * [Stripe payment integration](/integrations/stripe) for secure and reliable transaction processing
  * Website reference upload via URL - analyze existing sites for design inspiration
  * Referral reward system - earn points by sharing invitations with friends and colleagues
</Update>

<Update label="July 2025" description="Domain magic and mobile perfection! ✨">
  ✨ **New Features**

  * Project-based generation for React/Next.js - create complete projects with shared components, not just standalone pages
  * In-project page routing with navigation, forward/back buttons, and quick-access menu
  * One-click error fixing - AI automatically detects and resolves generation issues
  * Code input support in requirement box - add reference code to supercharge AI generation
  * Desktop and mobile preview switching for React/Next.js projects
  * Confirmation popup for plan downgrades to prevent accidental changes
  * Confirmation popups for paid plan upgrades to prevent surprise billing
  * Video tutorials for domain binding process

  🚀 **Improvements**

  * Optimized domain binding workflow - connecting custom domains is now simpler than ever
  * Simplified publishing process that reduces the learning curve dramatically
  * Enhanced responsive page display when accessing from mobile devices
  * Smarter project publishing with automatic React homepage setup
  * Enhanced AI understanding with real-time task breakdowns
  * Faster page generation - direct creation without intermediate previews
</Update>

<Update label="April 2025" description="Export your creations everywhere! 🎨">
  ✨ **New Features**

  * Export generated pages to Creatie and MasterGo design tools

  🚀 **Improvements**

  * Enhanced "Continue to Generate" feature with fewer unresponsive moments
  * Improved UI consistency across the platform

  🐛 **Bug Fixes**

  * Fixed retry function not working after generation failures
</Update>

<Update label="March 2025" description="AI wizardry and instant editing magic! ⚡">
  ✨ **New Features**

  * QuickEdit: Direct text editing - click any text element and start typing to update instantly
  * Smart image swap - select images to replace, remove backgrounds, or generate AI backgrounds
  * Automatic new page generation - click interactive elements to generate contextual pages and popups
  * AI intent detection that creates exactly what you need based on user interactions
</Update>

<Update label="February 2025" description="Polish, organization, and time travel! ✨">
  ✨ **New Features**

  * Live customer support via Tawk.to for quick problem resolution
  * Version deletion capability for better project management
  * Edit and regenerate past messages feature (available for new pages)
  * Clone existing pages to maintain consistent design across entire sites
  * Generate new pages using the same style as existing designs

  🚀 **Improvements**

  * Cleaner, more readable code formatting
  * Persistent sidebar state - navigation preferences stay exactly how you left them
  * New page version selector for faster design iteration
  * Increased character limit to 1000 in refinement input box
  * Enhanced UI icons across the platform for better visual consistency
</Update>

<Update label="January 2025" description="Organization meets flexibility! 📁">
  ✨ **New Features**

  * Project management system to organize generated pages
  * Multi-framework support for Vue, React, and UniApp
  * Better workflow organization for creative projects
</Update>


# AI-Readable Sites
Source: https://docs.readdy.ai/features/ai-readable-sites

Make an externally hosted website easier for AI assistants and search engines to discover, understand, and reference

AI-Readable Sites helps you add an AI-readable layer to a public website hosted outside Readdy. Readdy analyzes your existing content, prepares supporting assets, and guides you through connecting your domain without migrating or rewriting your original website.

With AI-Readable Sites, you can:

* **Create an AI site guide**: Give AI assistants a structured `llms.txt` entry point with your key pages and trusted facts
* **Add structured data**: Label important business, service, FAQ, breadcrumb, and product information on key pages
* **Publish answer-ready content**: Create focused pages based on questions customers are likely to ask
* **Support search discovery**: Add a sitemap and update `robots.txt` so search engines can discover the published answer pages

## Before You Start

<Info>
  AI-Readable Sites is for public websites hosted outside Readdy. If your website is built and hosted on Readdy, use [AEO/GEO Optimization](/features/geo-optimization) instead.
</Info>

Before you begin, make sure:

* Your website is publicly accessible
* You use a custom domain whose DNS records you can edit, such as `blog.yoursite.com`
* You can sign in to the provider that manages the domain's DNS
* Your Readdy plan has an available AI Readable site allowance

The current self-service flow does not support:

* Root domains such as `yoursite.com`; use a subdomain such as `ai.yoursite.com`
* Platform-provided addresses such as `yoursite.wordpress.com` or `project.vercel.app`
* Domains connected to WordPress.com through its nameserver option; reconnect the domain using WordPress's DNS-records option first

<Note>
  The Free plan includes one AI Readable site. AI-Readable Sites uses a separate site allowance and does not consume Credits. A site counts toward the allowance while it is activating or live.
</Note>

## How It Works

<Steps>
  <Step title="Open AI-Readable Sites">
    Open your Readdy workspace and select **"AI-Readable Sites"** in the sidebar.

    You can also open **"New Website"**, choose **"Make My Site AI-Readable"**, and enter your domain there.

    <Frame>
      <img alt="AI-Readable Sites sidebar entry and Make My Site AI-Readable option" />
    </Frame>
  </Step>

  <Step title="Enter Your Website Domain">
    Enter the main custom domain for your external website, such as `blog.yoursite.com`.

    Readdy checks that the domain is reachable, supported, and not already hosted on Readdy before starting the setup.
  </Step>

  <Step title="Let Readdy Analyze Your Website">
    Readdy scans your public pages, extracts business details, detects FAQs and trust signals, and maps the content needed for your AI-readable assets.

    If the website cannot be reached, check the domain and confirm that the site is publicly accessible before retrying.

    <Frame>
      <img alt="Website analysis progress showing crawl, parse, read, and map stages" />
    </Frame>
  </Step>

  <Step title="Review the Generated Assets">
    Wait while Readdy prepares your AI site guide, structured data, and answer-ready pages.

    Generation usually takes a few minutes. You can leave the page and return later because your progress is saved. When the assets are ready, click **"Continue to DNS activation"**.

    <Columns>
      <div>
        <Frame>
          <img alt="AI-readable assets being generated in the background" />
        </Frame>

        <div><em>Generating your AI-readable assets</em></div>
      </div>

      <div>
        <Frame>
          <img alt="Generated AI-readable assets ready for DNS activation" />
        </Frame>

        <div><em>Assets ready to preview</em></div>
      </div>
    </Columns>
  </Step>

  <Step title="Open Your DNS Provider">
    Follow the on-screen link to sign in to the provider that manages your domain's DNS.

    If Readdy cannot identify your provider, choose **"Choose Domain Provider"** and select it manually.

    If your domain registrar or DNS provider does not appear in the list, sign in to that provider directly and open the DNS settings for your domain. Use that DNS page to complete the next step.

    <Frame>
      <img alt="Hostinger DNS provider link in the domain connection flow" />
    </Frame>
  </Step>

  <Step title="Update Your DNS Records">
    Copy the DNS record name and value shown by Readdy, then add them at your DNS provider.

    1. Remove any conflicting records listed by Readdy.
    2. Add the new record using the exact type, name, and value shown.
    3. If you use Cloudflare, set the proxy status to **DNS only** (grey cloud).
    4. Use the displayed TTL, or the lowest value your provider allows.
    5. Return to Readdy and click **"I've updated records"**.

    <Warning>
      Only delete records that Readdy identifies as conflicts for the domain you are connecting. Changing unrelated DNS records can affect your website or email.
    </Warning>

    <Frame>
      <img alt="DNS records to remove and add during domain connection" />
    </Frame>
  </Step>

  <Step title="Verify the Connection">
    Click **"Verify connection"**. Readdy checks the DNS record, SSL certificate, original website, and AI-readable outputs in order.

    DNS propagation and SSL issuance can take a few minutes. You can leave the page while verification continues and check the latest status from the AI-Readable Sites list.
  </Step>

  <Step title="Review the Live Result">
    When setup is complete, review the crawler access check and each published asset.

    You can inspect the AI site guide, structured data, answer pages, sitemap, and `robots.txt`, or click **"View live site"**. Use **"Re-check"** to run the crawler access check again.

    <Frame>
      <img alt="Live AI-readable result with crawler access and published assets" />
    </Frame>
  </Step>
</Steps>

## What Readdy Publishes

| Output              | What It Does                                                                                 |
| ------------------- | -------------------------------------------------------------------------------------------- |
| AI site guide       | Publishes an `llms.txt` guide with key pages, trusted facts, and details AI should not infer |
| Structured data     | Adds schema markup to important pages so machines can interpret your business information    |
| Answer pages        | Publishes focused answers based on your existing website content                             |
| Sitemap             | Lists the homepage and answer pages for search-engine discovery                              |
| `robots.txt` update | Adds a sitemap pointer while preserving your existing crawl rules                            |

## Understand Site Statuses

| Status            | What It Means                                                       | What You Can Do                           |
| ----------------- | ------------------------------------------------------------------- | ----------------------------------------- |
| Generating        | Readdy is analyzing the site and preparing assets                   | Select the site to view progress          |
| Assets ready      | Assets are generated but the domain is not connected                | Select **"Connect domain"**               |
| Domain connection | Readdy is waiting for the required DNS record                       | Select **"Continue setup"**               |
| Verifying         | DNS, SSL, the original site, or published outputs are being checked | Select the site to view the current check |
| AI Readable       | The AI-readable outputs are live and verified                       | Select **"View result"**                  |

## What the Result Means

An **"AI Readable"** result confirms that Readdy can serve the generated assets and that the tested crawlers can access or are allowed to access them. It does not guarantee:

* Indexing or ranking in Google, Bing, or another search engine
* Visibility for a specific customer search
* Selection, recommendation, or citation in an AI-generated answer

These outcomes depend on each search engine or AI service, your website's authority and content quality, the user's query, and future recrawling.

## Troubleshooting

<AccordionGroup>
  <Accordion title="The domain is not supported">
    **Symptom:** Readdy asks you to try another domain or use a subdomain.

    **Cause:** You entered a root domain, a platform-provided address, a Readdy-hosted domain, or a domain whose DNS records are managed and locked by your website hosting platform.

    **How to fix:**

    1. Use a custom subdomain whose DNS you can edit, such as `ai.yoursite.com`.
    2. If the site is hosted on Readdy, use [AEO/GEO Optimization](/features/geo-optimization).
    3. If your website hosting platform manages the nameservers or locks the DNS records, reconnect the domain using its DNS-records option instead, if available. For example, in WordPress.com, choose the DNS-records connection method rather than the nameserver method. Then try again.
  </Accordion>

  <Accordion title="Readdy cannot find the domain">
    **Symptom:** You see a message that no DNS records were found.

    **Cause:** The domain may be misspelled, inactive, or not connected to the external website yet.

    **How to fix:** Confirm the spelling, open the domain in a browser, and check that it has active DNS records before retrying.
  </Accordion>

  <Accordion title="The DNS record is not detected">
    **Symptom:** Readdy continues to show **"DNS record not found yet"** after you update the record.

    **Cause:** The record may still be propagating, may use the wrong name or value, or may be proxied by Cloudflare.

    **How to fix:**

    1. Compare the record with the exact values shown in Readdy.
    2. Set Cloudflare records to **DNS only**.
    3. Wait a few minutes, then click **"I've updated records"** again.
  </Accordion>

  <Accordion title="The original site check needs attention">
    **Symptom:** DNS and SSL pass, but Readdy cannot connect to the original website.

    **Cause:** Some hosting platforms place custom domains behind a shared CDN, so Readdy cannot automatically identify the platform's original address.

    **How to fix:** Enter the platform-provided project address shown in your hosting dashboard, then click **"Save & re-verify"**.
  </Accordion>

  <Accordion title="AI-readable outputs need attention">
    **Symptom:** The domain is reachable, but one or more AI-readable outputs are not verified.

    **Cause:** DNS or edge changes may still be propagating, or an output may not yet be available on the live domain.

    **How to fix:** Wait a few minutes and run **"Verify connection"** or **"Re-check"** again. If the issue continues, submit a support ticket with the affected domain.
  </Accordion>
</AccordionGroup>

## FAQ

<AccordionGroup>
  <Accordion title="Will AI-Readable Sites change my original website?">
    No. Readdy analyzes your public website and adds an AI-readable delivery layer. It does not migrate or rewrite your original website content.
  </Accordion>

  <Accordion title="Can I use AI-Readable Sites for a website hosted on Readdy?">
    No. Use [AEO/GEO Optimization](/features/geo-optimization) for websites built and hosted on Readdy.
  </Accordion>

  <Accordion title="Does an AI Readable status mean my site will appear in AI answers?">
    No. The status confirms technical availability and verified outputs. Search engines and AI services independently decide whether to index, rank, retrieve, or cite the content.
  </Accordion>

  <Accordion title="Do I need to keep the setup page open during generation or verification?">
    No. Generation and verification continue in the background, and your progress is saved. Return to **"AI-Readable Sites"** to view the latest status.
  </Accordion>

  <Accordion title="Why might my website be temporarily unavailable after activation?">
    After activation, your domain starts routing through Readdy. Some browsers and networks may continue using cached DNS information for a short time, so the website may briefly fail to load. It usually becomes available again as the DNS cache refreshes, which can take up to about an hour.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Web Analytics
Source: https://docs.readdy.ai/features/analytics

Track visitor insights, page views, referrers, and lead conversions with Readdy's built-in analytics dashboard

Web Analytics provides comprehensive insights into your website's visitors, allowing you to track the top visited pages, referrers for a specific page, visitor country distribution, device breakdown, and real-time online users.

Web Analytics offers:

* **Privacy**: Only stores anonymized data without cookies, respecting your visitors' privacy and web experience.
* **Integrated Infrastructure**: Built into the Readdy platform and accessible from your project's dashboard — no third-party services needed.
* **Conversion Tracking**: Track leads from Readdy Agent and forms to monitor your website's conversion performance.

<Frame>
  <img alt="" />
</Frame>

## Why Use Web Analytics

Publishing your website is just the first step — what matters most is using it to drive more revenue for your business. With Web Analytics, you can better understand your users: which channels they come from, which pages they visit, where they're located, what devices they use, and how many leads they generate. These insights help you optimize your website design more effectively and better serve your business goals.

## Getting Started

<Steps>
  <Step title="Create and Publish Your Website">
    Build your website using Readdy and publish it to make it live.

    <Frame>
      <img alt="Website publish button" />
    </Frame>
  </Step>

  <Step title="Access the Analytics Dashboard">
    Click on the Analytics feature in your project to open the Analytics dashboard.

    <Frame>
      <img alt="Analytics entry in project dashboard" />
    </Frame>
  </Step>

  <Step title="View Your Data">
    Select your desired time range to view website performance data for that period.

    <Frame>
      <img alt="Time range selector dropdown" />
    </Frame>
  </Step>
</Steps>

## Data Definitions

### Visitors

The Visitors tab displays all your website's unique visitors within a selected timeframe. You can adjust the timeframe by selecting a value from the dropdown in the top right corner.

<Frame>
  <img alt="" />
</Frame>

<Tip>
  Hover over the data panel to view the exact number of visitors for each day.
</Tip>

### Page Views

The Page Views tab, like the Visitors tab, shows a breakdown of every page loaded on your website during a certain time period. Page views are counted by the total number of views on a page. For page views, the same visitor can view the same page multiple times, resulting in multiple events.

### Panels

Panels provide a way to view detailed analytics for Visitors and Page Views, such as top pages and referrers. They also show additional information such as the country and device of your visitors, helping you better understand your audience.

<Frame>
  <img alt="" />
</Frame>

<Tip>
  By default, each panel displays data sorted by the absolute number of visitors. Hover over any value to toggle between the absolute number and its percentage. Click "View All" to see all the data and Page Views breakdown.
</Tip>

### Number of Leads

The Number of Leads panel displays the count of visitors who left their contact information on your website. Data is sourced from forms and Readdy Agent leads.

<Frame>
  <img alt="" />
</Frame>

<Tip>
  If this module shows no data, consider adding forms or the Agent feature to your website to better track user leads.
</Tip>

## Notes

<Warning>
  Free users can only view data from the last 7 days. To access longer time periods, upgrade to a paid plan.
</Warning>

<Info>
  * Both subdomain and custom domain support analytics tracking.
  * Due to large data volumes, there may be a delay of a few minutes in data updates. If this occurs, refresh the page to view the latest data.
</Info>


# Animate
Source: https://docs.readdy.ai/features/animate

Add motion to selected page elements, preview animation effects, and apply them directly in Readdy

Animate helps you add motion to objects on your website, including headings, cards, images, buttons, sections, and icons. Select an element in Preview, open the animation panel, preview an effect, and apply it to the selected object.

With Animate, you can:

* **Bring key sections to life**: Add entrance motion to hero headlines, feature cards, images, and icons.
* **Preview before saving**: Try an animation on the selected element before you apply it.
* **Target nested elements more precisely**: Use **"Select Parent"** when you need to move up to the right layer.

## Before You Start

<Info>
  Animate works after you turn on **"Select to Edit"** and select an element in Preview. If you are new to this workflow, start with [Select to Edit & Quick Edit](/features/select-to-edit-and-quick-edit).
</Info>

Use Animate for focused motion on important elements. Too many animations on one page can distract visitors and make the site feel busy.

## How It Works

<Steps>
  <Step title="Select an Object">
    Turn on **"Select to Edit"**, then click the element you want to animate. When the edit toolbar appears, click **"Animate"**.

    <Frame>
      <img alt="Selected page element with the Animate button highlighted" />
    </Frame>
  </Step>

  <Step title="Preview an Animation">
    Click an animation in the panel. The selected object animates in Preview so you can see how the effect looks on the page.

    <Frame>
      <video aria-label="Animation preview panel showing an effect on the selected page element" />
    </Frame>

    Preview is temporary. The animation is not saved until you click **"Apply"**.
  </Step>

  <Step title="Apply the Animation">
    When you find an animation you like, click **"Apply"**. Readdy adds the animation to the selected element.
  </Step>
</Steps>

## Common Use Cases

| Use Case      | How Animate Helps                                        |
| ------------- | -------------------------------------------------------- |
| Hero headline | Add entrance motion to the main message on a page        |
| CTA button    | Add subtle movement to draw attention to the next action |
| Feature cards | Make landing page sections feel more polished            |
| Images        | Add light motion to supporting visuals                   |
| Icons         | Highlight key points without changing the layout         |

## Tips

* Use motion sparingly so the page still feels calm and easy to scan.
* Preview each animation before applying it.
* Keep effects subtle on buttons, cards, and text.
* Match the animation style to the page: smoother for professional pages, bolder for creative pages.
* For nested elements, use **"Select Parent"** if the animation targets the wrong layer.

## Troubleshooting

<AccordionGroup>
  <Accordion title="I don't see the Animate button">
    Make sure **"Select to Edit"** is on and an object is selected. If the element is nested, try selecting a parent element with **"Select Parent"**.
  </Accordion>

  <Accordion title="The animation panel didn't open">
    Reselect the object and click **"Animate"** again. If the panel still does not open, reload the project and try again.
  </Accordion>

  <Accordion title="I clicked an animation but nothing changed">
    Preview does not save the effect. Click **"Apply"** after choosing an animation to add it to the selected element.
  </Accordion>

  <Accordion title="The animation was applied to the wrong element">
    Select the correct layer and apply the animation again. For nested sections or stacked elements, use **"Select Parent"** to target the right wrapper.
  </Accordion>

  <Accordion title="How do I remove an animation?">
    Select the element and ask Chat to remove the animation, or open **"Code"** and edit the element styles directly.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Readdy Backend
Source: https://docs.readdy.ai/features/backend

Readdy's built-in Database, Functions, and Secrets to power your app without setting up a separate third-party backend service

Readdy Backend is Readdy's built-in backend foundation. It lets your project use a database and server-side functions directly inside Readdy, without first subscribing to and setting up a separate third-party backend service such as Supabase. It is designed to feel low-friction for non-technical users — in many cases, the connection and setup flow happens through Readdy with very little manual infrastructure work.

Readdy Backend includes three core modules:

* **Database**: manage and inspect your project's data
* **Functions**: run custom server-side logic for your project
* **Secrets**: store private values for server-side workflows without exposing them in your frontend code

With Readdy Backend, you can:

* **Skip separate backend setup**: add backend capability to your project inside Readdy instead of first configuring a separate database service
* **Start simple and go deeper**: begin from Readdy's UI and Chat, then move into direct data tools only when you need more control
* **Choose your level of control**: use visual tools for everyday work, and use SQL, Functions, or Secrets when your workflow becomes more advanced
* **Support real product scenarios**: manage leads, forms, products, orders, internal data, automations, and custom server-side workflows

<Info>
  **Prerequisites:** Readdy Backend and [Supabase](/integrations/supabase) **cannot** be connected to the same project at the same time. If your project already uses Supabase, disconnect it first before connecting Readdy Backend.
</Info>

<Warning>
  Disconnecting either Supabase or Readdy Backend from a project is a high-risk action. It may break existing features, cause function failures, or result in data loss on your website. If the project is already in use, make sure you understand the current setup and back up any important data before disconnecting.
</Warning>

## Application Layer & Use Cases

Readdy Backend gives your project the core backend tools behind the scenes. But for many users, that does not mean working in **Database**, **Functions**, or **Secrets** every day. Readdy also offers simpler, task-focused tools for common business needs, so you can manage your work through pages that match what you are trying to do.

* Use **Database**, **Functions**, and **Secrets** when you need direct backend access and control.
* Use a Readdy application when you want a simpler workflow built for a specific job.

E-commerce users should usually start with [Shop](/features/shop) to manage products and orders, instead of manually editing product and order tables in the database. The backend is still powering that experience underneath, but the [Shop](/features/shop) workflow is easier, safer, and more intuitive for non-technical users.

Use this rule of thumb:

* If a Readdy application already exists for your use case, start there.
* If you need direct data access, use **Database**.
* If you need custom server-side logic, use **Functions**.
* If you need to store private configuration for backend workflows, use **Secrets**.

<Tip>
  Use application modules (Shop) first when available. They are usually easier and safer for non-technical users.
</Tip>

## Terminology

| Term              | Meaning                                                                                            |
| ----------------- | -------------------------------------------------------------------------------------------------- |
| Database          | The place where your project's structured data is stored.                                          |
| Table             | A collection of records, like a spreadsheet for one type of data.                                  |
| Row               | One record inside a table.                                                                         |
| Column            | One field inside a table, such as `name`, `email`, or `price`.                                     |
| Schema            | A grouping layer inside the database. In Readdy Backend, `public` is the main schema for app data. |
| Table Editor      | A visual way to browse and edit data without writing SQL.                                          |
| SQL Editor        | A text editor for writing custom database queries.                                                 |
| Function          | A piece of server-side code you can deploy and run for custom backend logic.                       |
| Endpoint URL      | The URL you can call to trigger a deployed function.                                               |
| Secret            | A private project-level value, such as an API key or token, used by backend workflows.             |
| Application layer | A higher-level Readdy module built on top of the backend foundation, such as Shop.                 |

## How to Connect

<Steps>
  <Step title="Open the Connects Panel">
    Click the **Connects** button in your project.

    <Frame>
      <img alt="Open Connects Window" />
    </Frame>
  </Step>

  <Step title="Find Readdy Backend">
    Locate **Readdy Backend** in the Connects panel.

    <Frame>
      <img alt="Find Readdy Backend in the Connects panel" />
    </Frame>
  </Step>

  <Step title="Click Connect">
    Click **Connect**. Readdy takes you back to the Editor and sends the setup request automatically.
  </Step>

  <Step title="Verify the Connection">
    When the connection is ready, Readdy Backend shows as **Connected**.

    <Frame>
      <img alt="Backend is connected" />
    </Frame>
  </Step>
</Steps>

You can also connect Readdy Backend through Chat. Describe your needs — for example, tell Readdy that you need backend storage for sign-up data, products, orders, leads, bookings, or any other feature that requires stored data.

<Frame>
  <img alt="Adding backend through Chat" />
</Frame>

<Tip>
  Start from Chat when you are creating a new backend structure from scratch. Describe the outcome you want before jumping into tables.
</Tip>

## Using Database

**Database** gives you two working modes: **Table Editor** and **SQL Editor**.

<Columns>
  <Frame>
    <img alt="Table Editor view" />
  </Frame>

  <Frame>
    <img alt="SQL Editor view" />
  </Frame>
</Columns>

### How to Use It

1. Open **Backend** in the sidebar, then open **Database**.

   <Frame>
     <img alt="Expand Backend and select Database" />
   </Frame>

2. Select a table from the left panel.

   <Frame>
     <img alt="Switch between tables" />
   </Frame>

3. Use **Table Editor** for most everyday actions.

4. Switch to **SQL Editor** when you need a custom query.

   <Frame>
     <img alt="Run a query in SQL Editor" />
   </Frame>

5. If there are no tables yet, go to Chat and ask Readdy to create the data structure you need.

### What You Can Do in Database

* Search tables and switch between visible schemas
* View table rows with pagination
* Edit cells directly in **Table Editor**
* Insert a row, edit a row, or delete a row
* Add, edit, or delete columns
* Use a picker for foreign-key fields

<Tip>
  Review data carefully before deleting rows or columns, because this can affect page content or app behavior.
</Tip>

### Table Editor vs SQL Editor

* Choose **Table Editor** if you want a visual, low-risk workflow.
* Choose **SQL Editor** if you need a custom query and you already understand SQL.

## Using Functions

**Functions** lets you create and deploy custom backend endpoints for your project.

<Frame>
  <img alt="An example of adding a function" />
</Frame>

### Why Use Functions

* You need logic that should run on the server side instead of in the page.
* You want an endpoint your project or an external service can call.
* You need to handle custom workflows that go beyond simple data editing.

### Common Scenarios

* Handling webhook-style requests
* Connecting with third-party services
* Running custom processing logic
* Building automation behind forms, orders, or internal tools
* Creating backend endpoints for features that need more than UI-level logic

### What You Can Do in Functions

* View all deployed functions in one list
* Search functions by name
* Create a new function
* Edit and redeploy an existing function
* Copy a function URL
* Delete functions you no longer need

### How to Use It

1. Open **Backend** in the sidebar, then open **Functions**.
2. Click **"Deploy a New Function"**.
3. Enter a function name (function name is mandatory).
4. Write your code in the editor.
5. Click **"Deploy Function"**.
6. Copy the generated URL from the list when you need to call the function.

<Frame>
  <img alt="View Function list" />
</Frame>

## Using Secrets

**Secrets** lets you store sensitive values for your project, such as API keys, access tokens, and other backend-only configuration.

These values are designed for server-side use. They help your functions and backend workflows access private credentials without hardcoding them directly into your project code or exposing them in the page.

### Why Use Secrets

* You need to keep an API key or token out of your frontend code
* You want your backend logic to read private configuration safely
* You need one place to manage project-level secrets used by functions or backend workflows

### What You Can Do in Secrets

* View all existing secret names in one list
* Add a new secret
* Replace the value of an existing secret
* Delete secrets you no longer need

### How to Use It

1. Open **Backend** **Secrets** in the sidebar.
2. Click **Add Secret**.
3. Enter the **Name** and **Value**.
4. Click **Save Secret**.
5. **If a secret with the same name already exists, confirm that you want to replace it.**

### Important Behavior to Understand

* Secret values are write-only. After saving, Readdy does not show the value again in the list.
* Secret names are unique within a project. Adding a name that already exists replaces the previous value after confirmation.
* Updates may take up to 60 seconds to take effect in backend usage.

## Usage Limits and Out-of-Scope Cases

* **Database** is not the best place for everyday business operations if a dedicated Readdy application already exists for your use case.
* In **SQL Editor**, only **one SQL statement** can run at a time.
* In **SQL Editor**, write operations are only allowed in the `public` schema. Other visible schemas are read-only.
* Primary-key cells cannot be edited directly in **Table Editor**.
* Some rows or columns may not be deletable if other data depends on them or if the table is protected.
* **Functions** supports deploying and managing functions, but it is not a full backend operations suite. Items such as local debugging, logs/monitoring, migration management, and backup/restore are not part of this module.
* **Secrets** stores private configuration values, but it is not a full secret lifecycle or audit-management system.

## Tips and Best Practices

<Tip>
  Keep functions focused. One clear purpose per function is usually easier to manage than one large all-purpose function.
</Tip>

<Tip>
  Use Database to verify what is really stored, especially when your UI is driven by dynamic data.
</Tip>

## FAQ

<AccordionGroup>
  <Accordion title="I connected Readdy Backend, but Database looks empty">
    That usually means your project does not have any tables yet. Go to Chat and describe what data you want to store, such as users, products, orders, forms, or leads.
  </Accordion>

  <Accordion title="Should I use Shop or Database?">
    Use [Shop](/features/shop) for normal e-commerce operations like managing products and orders. Use **Database** when you need direct access to the underlying records or when you are working with data outside the Shop workflow.
  </Accordion>

  <Accordion title="Why can't I edit a cell in Table Editor?">
    Direct cell editing only works when the table has a primary key. Primary-key fields themselves are not editable in the inline editor.
  </Accordion>

  <Accordion title="Why didn't my SQL run?">
    Check these common causes:

    * You tried to run more than one statement at once
    * You tried a blocked system-level operation
    * You tried to write outside the `public` schema
    * Your SQL has a syntax or table-name issue
  </Accordion>

  <Accordion title="Why can't I delete a row or column?">
    The record may still be referenced by other data, or the table/column may be protected. Remove or update the dependent data first, then try again.
  </Accordion>

  <Accordion title="Where do I find my function URL?">
    After deployment, the URL appears in the **Functions** list. You can copy it directly from there.
  </Accordion>

  <Accordion title="Why can't I view a secret value after saving it?">
    Secret values are write-only for security reasons. Readdy shows the secret name and description, but not the saved value.
  </Accordion>

  <Accordion title="I updated a secret, but my backend workflow still uses the old value">
    Secret updates may take up to 60 seconds to take effect. Wait a moment, then run your function or workflow again.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Client Billing
Source: https://docs.readdy.ai/features/client-billing

Create products, send payment requests, and let clients pay through your white-label Client Portal

Client Billing helps agencies collect payments from clients without leaving the Readdy white-label workflow. You connect Stripe, create the products or services you want to bill for, send payment requests, and let clients complete checkout from their branded Client Portal.

With Client Billing, you can:

* **Centralize client payments**: Manage payment requests, drafts, payment status, and client checkout from the White Label workspace.
* **Reuse products and services**: Create products once, add one-time or recurring prices, and reuse them across client payment requests.
* **Support client self-service**: Clients can open **Payments** in the Client Portal, complete Stripe Checkout, and access billing information and invoices.
* **Keep billing tied to client work**: Select an existing Client before sending a payment request, so each request is linked to the right client record.

<Info>
  Client Billing is available on **Agency Pro** plans and above. Readdy charges a **2% transaction fee** for each successful payment processed through Client Billing. Stripe may also charge its own processing fees.
</Info>

## Before you start

Before you use Client Billing, make sure you have:

* A Readdy plan that includes Client Billing
* A Stripe account that can accept payments
* At least one Client created in your workspace
* Products or services you want to bill clients for
* Stripe Tax configured if you want to use automatic tax calculation

<Warning>
  Client Billing currently uses Stripe as the payment gateway. If Stripe is not connected, you cannot create products or send payment requests.
</Warning>

## How It Works

<Steps>
  <Step title="Navigate to Client Billing">
    Go to **White Label → Client Billing** in the workspace sidebar.

    The Client Billing menu contains three areas: **Payments**, **Products & Services**, and **Payment Gateway**.
  </Step>

  <Step title="Connect Stripe">
    Open **Payment Gateway**, agree to the **Client Billing Payment Terms**, then click **"Connect Stripe"**.

    <Frame>
      <img alt="Payment Gateway page showing the terms checkbox and Connect Stripe button" />
    </Frame>

    Readdy redirects you to Stripe to authorize the connection. If you have multiple Stripe accounts, choose the account you want to connect. After authorization, the page returns to Readdy automatically. Confirm that your Stripe account status is **Connected**.

    <Frame>
      <img alt="Payment Gateway page showing a connected Stripe account with charges and payouts enabled" />
    </Frame>
  </Step>

  <Step title="Add Products and Services">
    Open **Products & Services**. If your Stripe account already has products and prices, they appear in the list automatically.

    <Frame>
      <img alt="Products and Services page showing the empty product list and Add Product button" />
    </Frame>

    To create a new product, click **"Add Product"**.

    Add the product name, description, optional image, product category for tax, and at least one price. A price can be **One-off** or **Recurring**.

    <Frame>
      <img alt="Add Product page showing product information, category, and pricing fields" />
    </Frame>
  </Step>

  <Step title="Create a Payment Request">
    Open **Payments**, then click **"Create Payment Request"**.

    <Frame>
      <img alt="Payments page showing the empty payment request list and Create Payment Request button" />
    </Frame>

    Select the client and products or services that you want to bill for, then click **"Save & Send"**.

    <Frame>
      <img alt="Create Payment Request page showing client selection, product rows, and Save and Send action" />
    </Frame>
  </Step>

  <Step title="Ask the Client to Pay">
    After the payment request is sent successfully, the new request appears in the Payments list with a **Pending** status.

    <Frame>
      <img alt="Payments list showing a pending payment request for a client" />
    </Frame>

    Ask your client to sign in to the **Client Portal**, go to **Payments**, and click **"Checkout"** to complete payment through Stripe.

    <Frame>
      <img alt="Client Portal Payments page showing a pending request with the Checkout button" />
    </Frame>
  </Step>
</Steps>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Code Editor
Source: https://docs.readdy.ai/features/code-editor

Master your source code with professional-grade control and zero vendor lock-in.🚀

## Overview

**Readdy Code Editor** provides high-precision control over your website's codebase. Inspect every file, make direct edits, and export standalone, production-ready projects built with **React, Tailwind CSS and TypeScript**.

## Why Use It?

* **Full Ownership**: Export your entire project as a standalone bundle.
* **Efficiency & Speed**: Skip the AI generation queue. Edit code directly for instant updates, saving both your time and AI credits for more complex tasks.
* **Precise Control**: Make exact modifications. Avoid unexpected AI changes by manual overrides.
* **Production-Ready Stack**: Receive clean, industry-standard code. Projects include essential files like `vite.config.ts` and `tailwind.config.ts` for professional deployment.
* **Rapid Delivery**: Skip hours of manual environment setup. Move from AI concepts to functional projects for client handoff in minutes.

## How It Works?

### 1. Access and Navigate

View your site preview and code interface side-by-side for seamless navigation.

* **Switch to Code**: Click the **"Code"** tab in the right panel. Switch from AI Chat to the Code Editor instantly.
* **Explore & Inspect:** Use the **File Explorer** on the left to browse your project structure. Click files like `App.tsx` or `index.html` to view, check, and copy source code.

<Frame>
  <img alt="Gif1" />
</Frame>

### 2. Edit and Live Render

Modify your code directly to fine-tune designs and functionality.

* **Direct Code Editing**: Take full command of your source code. Modify files in `src` or configs like `tailwind.config.ts`. You can also rename, delete, or create files and folders via the right-click menu.

<Frame>
  <img alt="Rename" />
</Frame>

* **Instant Rendering**: Once your code edits are saved, the preview pane automatically refreshes to reflect your latest changes, enabling rapid, iterative development.

<Frame>
  <img alt="Gif2" />
</Frame>

* **Sync Visual Changes**: When you modify elements in the visual preview, the updates automatically sync to your codebase.

<Frame>
  <img alt="Gif3" />
</Frame>

* **Quick Debugging**: Click the top-right Console button to view available shortcuts. Use the shortcut **Command + Option + I** for Mac, **Ctrl + Shift + I** for Win to open the console, check errors and logs.

<Frame>
  <img alt="Gif4" />
</Frame>

### 3. Download Code

Click the **Download button** in the upper-right corner to export a complete `.zip` project bundle containing all your project files for independent hosting on any platform.

<Frame>
  <img alt="Download Code" />
</Frame>

## Special Considerations

* **Project Snapshots**: The exported bundle represents your project at the exact moment of download. If you make further AI edits, remember to download a new version.
* **Installing Dependencies**: Readdy projects use the standard NPM ecosystem. Before running your code locally, you must run `npm install` to install dependencies.
* **Local Staging**: After downloading, unzip the file and run `npm run dev` in a local editor like VS Code to test the site before final deployment.

## Need Help? Get Support

We offer three ways to help you get the most out of Readdy:

1. **Submit a Ticket**: Click the [**Feedback**](https://readdy.ai/feedback) button to submit a support ticket for specific issues.
2. **Contact Support**: Click the [**Support**](mailto:hi@readdy.ai) button to send an email directly to our technical team.
3. **Ask AI Assistant**: Use the **AI Assistant Agent** to ask detailed questions about documentation and features for instant answers.

<Frame>
  <img alt="Agent" />
</Frame>


# Team Collaboration
Source: https://docs.readdy.ai/features/collaboration

Learn how to invite team members, manage permissions, and collaborate on projects with Readdy's Team Collaboration features

# Overview

Readdy's Team Collaboration feature allows you to invite team members to work together on the same project. Whether you're working with designers, developers, or clients, you can collaborate seamlessly with role-based permissions and shared resources.

## Use Cases

Collaboration is perfect for:

* **Cross-functional teams**: Designers, developers, and product managers working together
* **Agency-client projects**: Share projects with clients for review and feedback
* **Team development**: Multiple team members contributing to the same website

***

## Inviting Members

Invite multiple team members simultaneously to collaborate on your project through email or shareable links.

<Accordion title="Invite by Email">
  Invite multiple team members simultaneously via email.

  **How to invite (either method works):**

  * Click the **"Invite"** button in the Editor
  * Or go to **Members** tab in the main page navigation

  **Steps to invite:**

  1. Click the **"Invite"** button
  2. Enter email addresses in the input field (press **Enter** after each)
  3. Select the role for each invited member (Editor or Viewer)
  4. Click **"Invite"** to send invitations

  <Frame>
    <img alt="Email invitation interface" />
  </Frame>

  **Email invitation interface**

  **Batch Invitations:**

  * **Maximum 5 email addresses** per batch invitation (invalid addresses highlighted in red)
  * Total team size limits vary by plan: Free (1/5), Starter (2/10), Pro-40+ (5/20) for Editors/Viewers

  **Delivery:**

  * Invitations sent via email and in-app notifications (for registered users)
</Accordion>

<Accordion title="Invite by Share Link">
  Generate a link that team members can use to join your project.

  **Link Types:**

  1. **Editor Link**: Invitees can edit the project
  2. **Viewer Link**: Invitees can view only
  3. **Disabled**: Turn off link sharing

  <Frame>
    <img alt="Share link settings" />
  </Frame>

  **Share link settings**

  **Link Validity:**

  * Editor and Viewer links are valid for **1 hour**
  * Clicking "Copy" generates a new link
  * Disabled links have no expiration (effectively turns off sharing)
</Accordion>

<Accordion title="Invitation Status">
  Track your team invitation status through the members panel:

  * **Pending Members**: Have received invitations but haven't joined yet (shown with light purple dashed border); you can **resend** invitations from the members panel
  * **Active Members**: Have successfully joined and have full access based on their assigned role
</Accordion>

<Accordion title="Collaboration Limits by Plan">
  Different plans support different numbers of collaborators. Both **active** and **pending** members count toward your plan's limits.

  | Plan    | Editor Limit  | Viewer Limit   |
  | ------- | ------------- | -------------- |
  | Free    | 1 per project | 5 per project  |
  | Starter | 2 per project | 10 per project |
  | Pro-40+ | 5 per project | 20 per project |
</Accordion>

***

## Collaboration & Permissions

Understanding how team members can work together on projects.

<Accordion title="View Member Status">
  You can view member online status in the **Invite** button in the top right corner. Online members' avatars will be displayed there.

  <Frame>
    <img alt="Member online status display" />
  </Frame>
</Accordion>

<Accordion title="Editing Order">
  Only **one member can generate content at a time**.

  **How it works:**

  * When a team member is generating content, a "XXX is generating" message appears
  * Once this indicator disappears, the generated content will appear in the dialogue
  * If you don't see the changes made by another member, you can manually refresh the page
  * When other members are generating, if necessary, you can click the stop generation button in the bottom right corner of the input box to interrupt their generation

  <Frame>
    <img alt="Someone is generating indicator" />
  </Frame>
</Accordion>

<Accordion title="Role Permissions">
  Understanding what each role can do in your project.

  | Permission                          | Owner | Editor | Viewer           |
  | ----------------------------------- | ----- | ------ | ---------------- |
  | **Editing Capabilities**            |       |        |                  |
  | Generate content & modify design    | ✓     | ✓      | ✗                |
  | Add pages                           | ✓     | ✓      | ✗                |
  | View code files                     | ✓     | ✓      | ✓                |
  | Edit code                           | ✓     | ✓      | ✗                |
  | Export code                         | ✓     | ✓      | ✗                |
  | Export Figma                        | ✓     | ✓      | ✗                |
  | **Member Management**               |       |        |                  |
  | Invite members                      | ✓     | ✓      | ✓ (Viewers only) |
  | Remove members                      | ✓     | ✗      | ✗                |
  | Change member roles                 | ✓     | ✗      | ✗                |
  | **Project Management**              |       |        |                  |
  | Delete project                      | ✓     | ✗      | ✗                |
  | Rename project                      | ✓     | ✓      | ✗                |
  | Manage integrations                 | ✓     | ✓      | ✗                |
  | **Data & Analytics**                |       |        |                  |
  | View forms and lead data            | ✓     | ✓      | ✓                |
  | Manage forms                        | ✓     | ✓      | ✗                |
  | Delete forms                        | ✓     | ✗      | ✗                |
  | Set email reminders                 | ✓     | ✗      | ✗                |
  | View analytics                      | ✓     | ✓      | ✓                |
  | View credit usage                   | ✓     | ✓      | ✓                |
  | **Unique Owner Privileges**         |       |        |                  |
  | Only one Owner per project          | ✓     | -      | -                |
  | All members use Owner's credit pool | ✓     | -      | -                |

  <Warning>
    Cannot transfer Ownership (currently)
  </Warning>
</Accordion>

***

## Editing Boundaries & Credits

Understanding how credits work in collaborative projects.

<Accordion title="Credit Deduction Rules">
  All members use the **project Owner's credits**.

  **Credit Pool:**

  * Collaborators consume credits from the Owner's credit pool (linked to Owner's subscription plan)
  * All members can view each member's Monthly and Total usage statistics in the **Members** section
  * Owner can view credit consumption for each project in **Usage**

  **When Encountering Feature or Credit Restrictions:**

  * When encountering restricted features or insufficient credits, this prompt will appear and collaborators need to contact the Owner to upgrade their plan

  <Frame>
    <img alt="Credit insufficient prompt for collaborators" />
  </Frame>
</Accordion>

***

## Managing Members

Access and manage your project team.

<Accordion title="Members Panel">
  View and manage all project collaborators.

  * **Access**: Go to the **Members** tab in the left navigation bar on the main page
  * **View options**: Sort by member, email, role, status, usage, or date joined

  <Frame>
    <img alt="Credit usage display in collaboration" />
  </Frame>
</Accordion>

<Accordion title="Changing & Removing Members">
  Change member roles or remove members from your project.

  **Who can make changes:**

  * Only the **Owner** can modify member roles or remove members

  **How to make changes:**
  You can change roles or remove members through either method:

  1. Go to the **Members** tab in the left navigation bar, find the member, and click their role dropdown
  2. Or click the **Invite** button in the website project, then modify the specific member's role

  **Available actions:**

  * Change role: Editor, Viewer
  * Remove member

  <Warning>
    The Owner role cannot be changed or transferred. There is only one Owner per project. After removing a member, they cannot access the project but can be re-invited later if needed.
  </Warning>
</Accordion>

***

## Best Practices & Tips

<Tip>
  **Start with Viewer permissions** for clients or stakeholders, then upgrade to Editor if they need to make changes.
</Tip>

<Tip>
  **Monitor credit usage** regularly in the Members panel to ensure your team has sufficient credits for collaborative work.
</Tip>

<Warning>
  **Plan ahead for team size** - Upgrading your plan before reaching collaboration limits prevents workflow interruptions.
</Warning>

<Tip>
  **Use share links for temporary access** - Link invitations are perfect for short-term collaboration or client reviews.
</Tip>

***

## Troubleshooting

<Accordion title="Invitation Not Received">
  **Possible causes:**

  * Email in spam folder
  * Link expired (after 1 hour)

  **Solutions:**

  * Check spam/junk folder
  * Resend invitation from Members panel
  * Verify correct email address
  * Ask recipient to check their Readdy notifications
</Accordion>

<Accordion title="Cannot Edit / Button Grayed Out">
  **Cause:** Another member is currently generating content.

  **Solution:**

  * Wait for the current generation to complete
  * The "XXX is generating" message will disappear when ready
  * Manually refresh the page to see updates
</Accordion>

<Accordion title="Can Multiple People Edit Simultaneously?">
  **Answer:** No, only one person can generate content at a time.

  **How it works:**

  * After member A sends a message, member B must wait for A's generation to complete before sending

  <Warning>
    **Important:** In extreme cases where A and B send messages simultaneously, version conflicts may occur. This usage pattern is not recommended.
  </Warning>
</Accordion>

<Accordion title="Where Do Credits Return When Credit Protection is Triggered?">
  **Answer:** Credits return to the project Owner.

  **Credit System:**

  * All collaboration uses the project Owner's credit pool
  * When credit protection is triggered, credits are refunded to the Owner's account
  * Collaborators do not have separate credit pools for collaborative projects
</Accordion>

<Accordion title="Not Receiving Messages from Collaborators">
  **Cause:** Page not refreshed to show latest updates.

  **Solution:**

  * Refresh the page to update collaborator information
  * Changes will appear after manual refresh
</Accordion>

<Accordion title="Link Invitation Join Failed">
  **Cause:** Project has reached the member limit for your plan.

  **Solution:**

  * Check your current member count in the Members panel
  * Upgrade your plan to increase collaboration limits
  * Remove inactive members to free up slots
  * Refer to [Collaboration Limits by Plan](#collaboration-limits-by-plan) for more details
</Accordion>

<Accordion title="Credits Blocked for Collaborators">
  **Cause:** Project Owner's credit pool is exhausted.

  **Solution:**

  * Collaborators must contact the Owner to upgrade plan or purchase credits
</Accordion>

***

## Need More Help?

If you've checked the troubleshooting section above and still need assistance, our support team is here to help:

* Email: [hi@readdy.ai](mailto:hi@readdy.ai)
* Feedback: [https://readdy.ai/feedback](https://readdy.ai/feedback)


# Credit Care
Source: https://docs.readdy.ai/features/credit-care

AI generation failure protection mechanism to reduce exploration costs and failure risks

Readdy Credit Care is a monthly exploration protection benefit. When you're unsatisfied with an AI-generated result, you can use the **"Discard"** action to undo the current version and restore the previous state. If that generation was created after the start of your current subscription cycle and you still have Credit Care usage available in the current month, the Credits consumed by that generation will be refunded.

<Info>
  * Each eligible **"Discard"** consumes 1 Credit Care usage and refunds the Credits spent on that generation
  * Credit Care resets on its own monthly cycle, separate from how Credits are billed or distributed
  * Yearly plans may receive Credits upfront for the full year, but Credit Care still refreshes monthly
  * Readdy Credit Care is not a refund or compensation mechanism — it's a subscription benefit designed to reduce AI exploration costs and failure risks
</Info>

## How It Works

<Steps>
  <Step title="Use AI Generation">
    Generate a version using AI, which will consume Credits.
  </Step>

  <Step title="Click the Discard Button">
    If the generated result doesn't meet your expectations, click the **"Discard"** button.

    <Frame>
      <img alt="Discard Button" />
    </Frame>
  </Step>

  <Step title="Confirm Discard">
    Click "Yes, Discard" to confirm the discard action.

    <Frame>
      <img alt="Confirm Discard" />
    </Frame>
  </Step>

  <Step title="Discard Complete">
    After confirmation:

    * Your project will be restored to the previous version
    * If the generation is eligible, the consumed Credits will be refunded
    * If the generation is eligible, 1 Credit Care usage will be consumed
    * If the generation is not eligible, you can still discard the version, but Credits will not be refunded

    <Frame>
      <img alt="Discard Complete" />
    </Frame>
  </Step>
</Steps>

<Warning>
  The **"Discard"** action cannot be undone. Once discarded, you cannot restore to that version again. Please confirm before proceeding.
</Warning>

## Credit Care Allowances

Each subscription plan includes the following allowances per **monthly Credit Care cycle**:

| Plan                     | Monthly Credit Care Usage |
| ------------------------ | ------------------------- |
| Free                     | 10                        |
| Starter                  | 30                        |
| Pro-40 (6,000 Credits)   | 50                        |
| Pro-80 (12,000 Credits)  | 100                       |
| Pro-120 (18,000 Credits) | 150                       |
| Pro-160 (24,000 Credits) | 190                       |
| Pro-200 (30,000 Credits) | 240                       |
| Pro-240 (36,000 Credits) | 290                       |
| Pro-280 (42,000 Credits) | 340                       |
| Pro-320 (48,000 Credits) | 390                       |
| Pro-360 (54,000 Credits) | 430                       |
| Pro-400 (60,000 Credits) | 480                       |

## Conditions for Credit Refund

When discarding a version, the following conditions must be met to refund Credits:

<CardGroup>
  <Card title="Generated After Current Subscription Cycle Started" icon="calendar">
    Only versions generated after the start of the current subscription cycle are eligible for credit refunds when discarded
  </Card>

  <Card title="No Reward or Goodwill Credits Used" icon="coins">
    Only when the discarded version was generated using **100% subscription credits** (no bonus or Goodwill credits) can the credits be refunded
  </Card>
</CardGroup>

<Note>
  You must also have remaining Credit Care usage in the current monthly Credit Care cycle when you discard the version.

  If your subscription was updated and a new subscription cycle began, versions generated before that new cycle started can still be discarded, but Credits will not be refunded and no Credit Care usage will be consumed.

  Versions outside the current subscription cycle can still be discarded, but Credits will not be refunded and no Credit Care usage will be consumed.

  If a generation used Reward Credits, Goodwill credits, or a mix of subscription credits with those credits, you can still discard the version, but Credits will not be refunded and no Credit Care usage will be consumed.
</Note>

### Examples

<AccordionGroup>
  <Accordion title="✅ Eligible for Credit Refund">
    **Example 1**: You purchased a yearly Pro plan on January 15th and received your yearly Credits upfront. Your Credit Care cycle still refreshes monthly from the 15th. On March 20th, you generated a version consuming 25 Credits using only subscription credits, then discarded it on August 22nd while the same yearly subscription was still active and you still had Credit Care usage available that month.

    **Refund Eligible**: The version was generated after the current subscription cycle started, all consumed credits came from subscription credits, and you still had Credit Care usage available in the current monthly cycle.
  </Accordion>

  <Accordion title="❌ Not Eligible for Credit Refund">
    **Example 1**: You generated a version on January 10th, then your subscription renewed or changed on January 15th and entered a new subscription cycle. On January 20th, you discarded the version from January 10th.

    **Not Eligible**: The version was generated before the current subscription cycle started. You can still discard it, but Credits will not be refunded and no Credit Care usage will be consumed.

    ***

    **Example 2**: You used Reward Credits or Goodwill credits for generation, then want to discard the version.

    **Not Eligible**: The consumed credits are not from subscription credits only. You can still discard the version, but Credits will not be refunded and no Credit Care usage will be consumed.

    ***

    **Example 3**: You used a mix of subscription credits and Reward Credits or Goodwill credits for generation.

    **Not Eligible**: The consumed credits are not entirely from subscription credits. You can still discard the version, but Credits will not be refunded and no Credit Care usage will be consumed.
  </Accordion>
</AccordionGroup>

<Tip>
  Each **"Discard"** only refunds the Credits consumed by one generation.
</Tip>

## Important Notes

<Warning>
  * Readdy Credit Care is not a refund or compensation
  * **"Discard"** actions are irreversible
  * Abnormal or abusive behavior may be restricted
</Warning>

## FAQ

<AccordionGroup>
  <Accordion title="What if I run out of Credit Care usage?">
    You can still **"Discard"** versions, but that discard will not refund Credits if you have already used up your monthly Credit Care usage. Refund eligibility becomes available again when the next monthly Credit Care cycle begins.
    Or you can click <a href="https://readdy.ai/user/subscription">Upgrade</a> to a higher plan to get more Credit Care usage.
  </Accordion>

  <Accordion title="Does unused Credit Care usage carry over?">
    No, unused allowances expire at the end of each monthly Credit Care cycle.
  </Accordion>

  <Accordion title="When does Credit Care usage reset?">
    At the start of each new monthly Credit Care cycle. For paid plans, the cycle is anchored to the date you paid for the subscription and stays monthly even if your yearly plan gives you Credits upfront.
  </Accordion>

  <Accordion title="How is Credit Care usage handled when upgrading or downgrading plans?">
    * **Upgrade to a higher plan**: Takes effect immediately, and Credit Care usage resets to the new plan's allowance
    * **Downgrade**: Takes effect at the next billing boundary. When the new plan starts, Credit Care begins a new monthly cycle with the new plan's allowance
  </Accordion>

  <Accordion title="If I discard a version from an earlier Credit Care cycle, what happens?">
    It can still qualify for a Credit refund as long as the version was generated after your current subscription cycle started, used only subscription credits, and you still have Credit Care usage available in the current monthly cycle.

    If the version was generated before the current subscription cycle started, such as before a subscription renewal or plan change took effect, you can still discard it and restore the previous state, but Credits will not be refunded and no Credit Care usage will be consumed.
  </Accordion>

  <Accordion title="What happens to versions created before a subscription update took effect?">
    They can still be discarded after the new subscription cycle starts.

    However, because those versions were generated before the current subscription cycle began, they will not trigger Credit Care. Credits will not be refunded, and no Credit Care usage will be consumed.
  </Accordion>
</AccordionGroup>


# Upload and Edit Image
Source: https://docs.readdy.ai/features/edit-image

Complete guide to uploading, replacing, and editing images on your website including background removal and image enhancement features

The image editing features allow you to work with images on your page in several ways, including: replacement, background removal.

<Steps>
  <Step title="Activate Selector">
    Start by opening the **Selector Mode** to begin editing. This mode allows you to select elements on your page.

    <Frame>
      <img alt="Selector Mode activation interface" />
    </Frame>
  </Step>

  <Step title="Select Your Image">
    Click on any image you'd like to modify. The selected image will be highlighted.

    <Frame>
      <img alt="Image replacement process" />
    </Frame>
  </Step>
</Steps>

### Replace (Upload) Your Images

Use Selector Mode to click on any image, select **Image** > **Replace**, then upload your new image to replace it instantly.

### Background remove

Remove backgrounds from images to create transparent backgrounds. This works well for product photos and portraits.
Select the image, choose **Image** > **Remove BG**, then proceed with Remove Background and Apply operations.

<Info>
  Background remove costs **10 credits** per operation.
</Info>

<Frame>
  <img alt="Before and after comparison of background remove" />
</Frame>

**Example:**

<Frame>
  <img alt="background remove example" />

  <img alt="background remove example" />
</Frame>

### Background Generation

Generate new backgrounds for product images using AI. Select the image, choose **Image** > **Gen BG**, then enter your prompt and click Generate.

<Info>
  Background generation costs **50 credits** per operation.
</Info>

<Frame>
  <img alt="Examples of AI-generated backgrounds" />
</Frame>

**Example Prompts:**

<Accordion title="Example 1: Sneaker with Dark Background">
  **Prompt:** "Create a dark, moody background to emphasize the sneaker. Incorporate floating black rocks around it, adding a sense of depth. Use a gradient from black to dark green to enhance the dramatic effect. Soft lighting should highlight the shoe's unique design and texture, creating a bold, adventurous vibe."

  <Frame>
    <img alt="Sneaker with dark generated background" />
  </Frame>
</Accordion>

<Accordion title="Example 2: Wine Glass with Warm Setting">
  **Prompt:** "Create a warm, rustic background with soft, blurred textures resembling a cozy wooden surface. Position the wine glass prominently, allowing the light to catch its contours and reflections. Use gentle lighting to enhance the glass's clarity."

  <Frame>
    <img alt="Wine glass with warm background" />
  </Frame>
</Accordion>

<Accordion title="Example 3: Headphones with Minimalist Background">
  **Prompt:** "Create a minimalist background with a soft gradient from light gray to dark gray. Position the headphones on a rugged rock formation, emphasizing their sleek design. Use subtle lighting to highlight the headphones' contours and textures, creating a modern and sophisticated atmosphere."

  <Frame>
    <img alt="Headphones with minimalist background" />
  </Frame>
</Accordion>


# Edit Page
Source: https://docs.readdy.ai/features/edit-tool

Learn how to edit your website pages using Readdy's AI chat interface and selector mode to modify text, and other elements precisely

<Danger>The `Selector` feature has been fully updated. Please refer to the [Select to Edit and Quick Edit](https://docs.readdy.ai/features/select-to-edit-and-quick-edit) documentation for details.</Danger>

* You can edit the page by chatting with Readdy in the dialog box at the bottom right corner.
* To more accurately indicate the elements you want to modify to Readdy, you can use **Selector Mode** to select text, images or other elements on your page.

## Selector Mode

<Steps>
  <Step title="Activate Selector">
    Start by opening the **Selector Mode** to begin editing. This mode allows you to select elements on your page.

    <Frame>
      <img alt="Selector Mode activation interface" />
    </Frame>
  </Step>

  <Step title="Choose Your Element">
    Click on any text, image, or section you'd like to modify. The selected element will be highlighted.

    <Frame>
      <video alt="Paris fashion runway video example" />
    </Frame>
  </Step>

  <Step title="Select Your Action">
    Choose from the available editing options based on what you selected.
  </Step>
</Steps>

<Tip>
  Besides these operations, using the selector tool to select an element and then sending a command is also a good way. For example: make the selected text larger.
</Tip>

## Text Editing

Simply activate Selector Mode, click on any text element, and choose the **Text** option to start editing directly.

<Frame>
  <img alt="Text editing process overview" />
</Frame>


# Extra Sites
Source: https://docs.readdy.ai/features/extra-sites

Publish beyond your plan's included site limit with flexible per-site billing on top of your subscription

Extra Sites provide flexible publishing capacity beyond the number of live sites included in your plan. You do not need to decide how many you will need in advance. Billing is based on how many live sites remain above your plan limit when the bill is generated, so you can stay focused on publishing instead of planning capacity ahead of time.

## What counts as an Extra Site?

Each plan includes a set number of live published sites. Any live site above that included limit counts as an Extra Site.

`Current Extra Sites = current live published sites - included site quota`

When this result is greater than `0`, each site above your included allowance counts as `1` Extra Site.

This means:

* Republishing, updating, or redeploying a site that is already live does not create a new Extra Site.
* A new Extra Site is only created when a newly published site pushes you above your plan limit.
* Once a site is unpublished, it no longer counts toward your current Extra Site usage.
* Extra Sites are always based on your current live overflow, not the total number of sites you have ever published.

| Scenario                                                       | Does it create an Extra Site? | Why                                          |
| -------------------------------------------------------------- | ----------------------------- | -------------------------------------------- |
| Your plan includes `3` sites, and `3` sites are currently live | No                            | You are still within your included allowance |
| You publish a `4th` live site                                  | Yes, `1` Extra Site           | You are now above your plan limit            |
| You update the same `4th` live site                            | No                            | It is still the same live site               |
| You unpublish the `4th` site                                   | No longer counted             | Your current Extra Site usage returns to `0` |

<Tip>
  Think of Extra Sites as flexible hosting capacity beyond your plan, not as a fixed bundle you need to buy in advance.
</Tip>

## How Extra Site billing works

Before you read a bill, there are only three things to check:

1. Whether your base subscription is `Monthly` or `Yearly`
2. If your base subscription is yearly, whether Extra Site billing is set to `Monthly` or `Yearly`
3. How many sites are still above your included limit when the bill is generated

Most Extra Site charges are made up of two parts:

* `Previous-cycle new charges`: the prorated cost of newly added Extra Sites from the last billing cycle. Each newly added Extra Site is charged as `site monthly price ÷ days in the month × actual hosted days`, then added together.
* `Next-cycle renewal`: the renewal cost for the Extra Sites that are still above your included limit at the next billing point.

| Your subscription                                | When Extra Site charges appear                  | What the bill includes                                                                                          |
| ------------------------------------------------ | ----------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| Monthly subscription                             | At subscription renewal                         | Previous-cycle new charges + next month's subscription fee + next month's Extra Site renewal                    |
| Yearly subscription + Extra Sites billed monthly | Every month                                     | Previous-cycle new charges + next month's Extra Site renewal                                                    |
| Yearly subscription + Extra Sites billed yearly  | When new Extra Sites are added during the month | Previous-cycle new charges + renewal for the newly added Extra Sites through the end of the current annual term |

### Monthly subscriptions

* You can add Extra Sites at any time. There is no need to pre-purchase a fixed number first.
* New Extra Sites are not billed immediately as a separate invoice during the month. They are billed at your subscription renewal.
* At renewal, the Extra Site count is recalculated based on how many live sites are still above your included limit, and only the capacity that is still needed is renewed.

```text theme={null}
Monthly renewal bill = previous-cycle new charges + next month's subscription fee + next month's Extra Site renewal
```

### Yearly subscriptions

* You can add Extra Sites at any time during your annual term.
* In `Extra Site Hosting Settings`, you can choose whether Extra Sites are billed `Monthly` or `Yearly`.
* The billing setting that is active when the invoice is generated determines how the charge is billed. `Monthly` is the default.

| Compare                                             | `Monthly`                                                               | `Yearly`                                                                                                                                          |
| --------------------------------------------------- | ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| Billing timing                                      | One Extra Site invoice is generated each month                          | If new Extra Sites are added during the month, a yearly invoice is generated that month for the newly added portion                               |
| Includes your base subscription fee                 | No. It covers Extra Sites only.                                         | No. It covers Extra Sites only.                                                                                                                   |
| Includes previous-cycle new charges                 | Yes                                                                     | Yes                                                                                                                                               |
| Renewal scope                                       | Renews the Extra Sites that are still over the limit for the next month | Charges the newly added Extra Sites through the end of your current annual term                                                                   |
| Annual discount                                     | No                                                                      | Yes                                                                                                                                               |
| How long the paid capacity stays valid              | Month to month                                                          | Until the end of your current annual subscription                                                                                                 |
| Will the same paid portion appear again next month? | Yes, if those Extra Sites are still needed next month                   | No. Once that yearly-paid portion has been paid, it will not be billed again next month unless additional new Extra Sites are added later         |
| You can read the bill as                            | Previous-cycle new charges + next month's Extra Site renewal            | Previous-cycle new charges + renewal for the newly added Extra Sites through the end of the current annual term, with the annual discount applied |

`Yearly` does not mean billing waits until your annual subscription expires. It means that when new Extra Sites are added, the newly added portion can be billed up front through the end of your current annual term.

Once that yearly invoice is paid, that portion stays valid through the end of the current annual term and does not appear again on the next month's bill. If you add more Extra Sites later, only the newly added portion generates another yearly invoice.

<Warning>
  If an Extra Site invoice is not paid on time, any sites above your included limit may be taken offline. While the invoice remains unpaid, additional Extra Sites cannot be published.
</Warning>

### Plan upgrades

#### 1. Does the target plan already cover your current live sites?

* If the target plan covers all currently published sites, no further Extra Site charges apply.
* If the target plan still does not cover all live sites, the Extra Site count is recalculated and only two parts remain billable: previous-cycle new charges and ongoing renewal.
* Previous-cycle new charges are calculated using the monthly unit price of your current plan.

#### 2. How is the target plan's included capacity applied to current Extra Sites?

* During the upgrade, the included capacity from the target plan is applied to your currently published sites first.
* That offset is applied in order of publish duration, with longer-running Extra Sites covered first.
* Any Extra Sites absorbed by the target plan's included allowance are not charged as previous-cycle new charges.

### Plan downgrades

* After a downgrade, any live sites above the number included in the target plan count as Extra Sites and create additional charges.
* Previous-cycle Extra Site charges use the price of your current plan. Any Extra Sites that remain in use after the downgrade renew at the target plan price.

### Situations where no additional charge is created

<Accordion title="Temporary Extra Sites usually do not create extra cost if they are removed in time">
  If the extra capacity was only temporary and the site is unpublished before the bill is generated, that unused capacity is released, which helps avoid unnecessary extra charges.

  For previous-cycle new charges, billing only starts once the hosting duration is more than `3` days. Very short-term use usually does not create an additional charge.
</Accordion>

<Accordion title="Paid Extra Sites are credited when you upgrade">
  If you already paid for Extra Sites and then upgrade to a plan with more included capacity, that paid capacity is credited during the upgrade. The same capacity is not charged twice.
</Accordion>

<Accordion title="Included capacity from the upgraded plan is applied before previous-cycle charges">
  When you upgrade while you are already over the limit, the included capacity from the target plan is applied first. Longer-running Extra Sites are offset first.

  Any Extra Sites absorbed by the new plan's included allowance are not charged as previous-cycle new charges.
</Accordion>

## How to view Extra Sites

On the **Subscription** page, the `Usage Overview` section shows Extra Site usage in two rows:

<Frame>
  <img alt="Subscription page showing Included Site Hosting as Live and Total, and Extra Site Hosting as Live and Paid" />
</Frame>

* `Included Site Hosting` shows `Live / Total`
* `Extra Site Hosting` shows `Live / Paid`

You can read those numbers like this:

| Item                            | What it means                                                                                                                         |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `Included Site Hosting` `Live`  | Live sites that are still covered by the included allowance in your current plan                                                      |
| `Included Site Hosting` `Total` | The total number of sites included in your current plan                                                                               |
| `Extra Site Hosting` `Live`     | Live sites that are above your included allowance and are currently using Extra Site capacity                                         |
| `Extra Site Hosting` `Paid`     | Total Extra Site capacity you have already paid for, including capacity currently in use and paid capacity that is not being used yet |

<Info>
  If `Extra Site Hosting` shows `3 Live / 5 Paid`, it means `3` over-limit sites are currently live, and `5` units of Extra Site capacity have already been paid for in total. The remaining `2` are still available and are applied first the next time you publish above your plan allowance.
</Info>

If you are on a yearly subscription, the `Extra Site Hosting` row also includes a `Setting` entry. From there, you can choose whether Extra Sites are billed `Monthly` or `Yearly`.

<Frame>
  <img alt="Extra Site Hosting Settings modal showing Monthly and Yearly billing cycle options" />
</Frame>

## Common questions

<Accordion title="When does a site start counting as an Extra Site?">
  Only when the number of live published sites is greater than the number included in your plan. As long as you stay within your plan's included allowance, no Extra Site usage is counted.
</Accordion>

<Accordion title="Does updating a live site create another Extra Site?">
  No. Republishing, updating, or redeploying a site that is already live still counts as the same published site, so it does not create another Extra Site.
</Accordion>

<Accordion title="Why do I see both `Live` and `Paid` on the Subscription page?">
  `Live` shows how many Extra Sites are currently being used by live over-limit sites. `Paid` shows how much Extra Site capacity you have already paid for in total.

  If `Paid` is higher than `Live`, paid capacity is still available and is applied first the next time you publish above your included limit.
</Accordion>

<Accordion title="Why does my bill include both previous-cycle new charges and next-cycle renewal?">
  Those two lines represent different things. `Previous-cycle new charges` settle Extra Sites that were newly added during the last billing cycle, using prorated actual usage. `Next-cycle renewal` covers the Extra Sites you still want to keep above your included limit at the next billing point.

  It is not double billing. One part covers newly added usage from the last cycle, and the other covers the capacity you are keeping into the next cycle.
</Accordion>

<Accordion title="If I unpublish a temporary site before billing, will I still be charged?">
  Usually not. If a temporary site is unpublished before the bill is generated, that unused capacity is released so it does not create unnecessary additional charges.

  For previous-cycle new charges, billing only starts once the hosting duration is more than `3` days. Very short-term use usually does not create an extra charge.
</Accordion>

<Accordion title="I paid for 5 Extra Sites but only use 2 now. Will I keep paying for 5?">
  Not necessarily. At each billing point, the Extra Site count is based on how many live sites still exceed your plan's included allowance.

  If you no longer need the unused portion before the next billing point, that unused capacity is released, which helps avoid additional charges.
</Accordion>

<Accordion title="Should I choose `Monthly` or `Yearly` for Extra Site billing on a yearly plan?">
  Choose `Monthly` if you want Extra Sites to be billed month by month and prefer the most flexible option. Choose `Yearly` if you expect those Extra Sites to remain in use and want the annual discount through the end of your current annual term.
</Accordion>

<Accordion title="If I upgrade and the new plan covers all of my live sites, do Extra Site charges stop?">
  Yes. If the target plan fully covers your currently published sites, no further Extra Site charges apply.

  If you already paid for Extra Sites before the upgrade, that paid capacity is also credited so the same capacity is not charged twice.
</Accordion>

<Accordion title="If I add a site this cycle and then upgrade at renewal, will I still be charged for the previous-cycle Extra Site?">
  No. If you upgrade to a higher-tier plan with more included sites at that point, the previous-cycle new charges generated by the newly added Extra Site are waived, so you do not need to pay them separately.
</Accordion>

<Accordion title="After a downgrade, which plan price is used for previous-cycle charges and renewal?">
  Previous-cycle Extra Site charges use the price of your current plan, because that usage already happened before the downgrade. Ongoing renewal after the downgrade uses the price of the target plan.
</Accordion>

<Accordion title="What happens if an Extra Site invoice is unpaid?">
  If an Extra Site invoice is not paid on time, sites above your included limit may be taken offline. While the invoice remains unpaid, additional Extra Sites cannot be published.
</Accordion>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# File Upload & Parsing
Source: https://docs.readdy.ai/features/file-upload

Upload files, data, and reference images so Readdy can use them while generating or editing websites

File Upload & Parsing lets you send project files, documents, spreadsheets, and visual references alongside your prompt. Use it when Readdy needs source material, brand assets, product data, or layout inspiration to generate or edit a website more accurately.

With File Upload & Parsing, you can:

* **Upload project files**: Add documents, spreadsheets, images, archives, audio, or video files to the message you send to Readdy.
* **Parse supported documents and data**: Let Readdy read PDF, CSV, XLSX, and TXT files when your prompt asks it to use their content.
* **Use media in project edits**: Upload MP4 videos as assets and ask Readdy to replace suitable page elements with them.
* **Use visual references**: Add reference images for style, layout, composition, or visual direction without saving them to your project's Files storage.
* **Reuse existing assets**: In an existing project, browse files that were already uploaded instead of uploading them again.

## Before You Start

* File attachments are available from the **"+"** menu in supported project creation and editing flows.
* In an existing collaborative project, you need permission to upload assets before **"Upload Files"** and **"Browse Files"** appear.
* File attachments saved to your project's **Files** storage count toward your plan's storage limit.
* Reference images are separate from file attachments. They are used as visual guidance and are not saved to the Files library.
* Readdy waits for uploads and image processing to finish before it sends your request.

<Info>
  File parsing is not the same as file uploading. Many formats can be uploaded, but only **PDF**, **CSV**, **XLSX**, and **TXT** are parsed as text or data sources.
</Info>

## File Attachments vs. Reference Images

Readdy has two ways to include visual and file-based context in a prompt.

<Frame>
  <img alt="Input area showing file chips and a reference image thumbnail side by side" />
</Frame>

<CardGroup>
  <Card title="File Attachments" icon="file-arrow-up">
    Saved to your project's **Files** storage and counted toward your storage quota.

    * Use **"+"** -> **"Upload Files"**, drag and drop, or **"Browse Files"**
    * Add up to **10 file attachments** per message
    * Displayed as file chips in the input area
  </Card>

  <Card title="Reference Images" icon="image">
    Used as visual guidance for Readdy and not saved to the Files library.

    * Use **"+"** -> **"Reference Image"**, or paste with **"Ctrl/Cmd + V"**
    * Add up to **5 reference images** at a time
    * Displayed as image thumbnails in the input area
  </Card>
</CardGroup>

You can use both in one message. For example, attach a PDF with website requirements, upload a logo as a file attachment, and add a screenshot as a reference image for the layout.

<Warning>
  Images dragged from your desktop are added as file attachments. To add a reference image, use **"Reference Image"** from the **"+"** menu or paste an image into the input area.
</Warning>

## How It Works

<Steps>
  <Step title="Open the Attach Menu">
    Click the **"+"** button in the input area.

    In a new project, the menu includes **"Reference Image"** and **"Upload Files"**.

    <Frame>
      <img alt="Attach menu in a new project with Reference Image and Upload Files options" />
    </Frame>

    In an existing project, the menu can also include **"Browse Files"** and **"Embed Code"**.

    <Frame>
      <img alt="Attach menu in an existing project with Reference Image, Upload Files, Browse Files, and Embed Code options" />
    </Frame>
  </Step>

  <Step title="Choose How to Add Files">
    Select the input type that matches what you want Readdy to do.

    * Use **"Upload Files"** for documents, spreadsheets, images, media, archives, and other project resources.
    * Use **"Browse Files"** in an existing project to reuse files already stored in **Files**.
    * Use **"Reference Image"** when you want Readdy to follow a visual style, layout, or screenshot.
    * Drag files into the input area when you want to add them as file attachments.

    <Frame>
      <img alt="Dragging files into the input area and adding them as file chips" />
    </Frame>
  </Step>

  <Step title="Wait for Uploads to Finish">
    Keep the files in the input area until their upload or processing state finishes.

    In a new project, selected file attachments are kept in your browser until you send the prompt, then uploaded during project creation. In an existing project, files upload to **Files** as soon as you select them.

    <Frame>
      <img alt="File upload progress shown below the message input" />
    </Frame>
  </Step>

  <Step title="Send Clear Instructions">
    Tell Readdy exactly how to use each file.

    For example:

    * "Read the PDF and generate the landing page copy from it."
    * "Use the CSV as the product list and create pricing cards."
    * "Use logo.svg as the site logo."
    * "Replace the hero image with intro-video.mp4."
    * "Use the reference image for layout and visual style."
  </Step>
</Steps>

## What Uploaded Files Can Do

Uploaded files give Readdy resources to use while generating or editing a project.

| File type                                           | What you can do                                                                                                                                      |
| --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Images**: PNG, JPG, JPEG, GIF, WebP, SVG          | Use logos, icons, screenshots, product photos, background images, and other visual assets in the generated site.                                     |
| **Documents and spreadsheets**: PDF, TXT, CSV, XLSX | Ask Readdy to read requirements, page copy, product lists, tables, catalog data, or structured content.                                              |
| **Other documents**: DOC, DOCX, XLS, PPT, PPTX      | Upload them as project resources. Convert them to PDF, TXT, CSV, or XLSX if Readdy needs to parse the content.                                       |
| **Media**: MP4, MP3                                 | Attach media files as project resources. Use MP4 videos to replace suitable page elements, such as hero images, image blocks, or video placeholders. |
| **Archives**: ZIP, RAR                              | Store or attach packaged assets. Readdy does not parse archive contents.                                                                             |

<Frame>
  <img alt="Attachment hint showing formats that Readdy can parse" />
</Frame>

## What Parseable Files Can Do

Parseable files are files Readdy can read as text or structured data when your prompt asks it to use the content.

| Parseable format | Good for                                                                     | Example prompt                                                         |
| ---------------- | ---------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| **PDF**          | Requirements, proposals, content briefs, product descriptions, event details | "Build the website based on the requirements in this PDF."             |
| **TXT**          | Raw copy, outlines, prompts, content drafts                                  | "Use this TXT file as the page copy and improve the structure."        |
| **CSV**          | Product lists, pricing tables, locations, event schedules, datasets          | "Create product cards from the rows in this CSV."                      |
| **XLSX**         | Spreadsheets with structured rows and columns                                | "Use the spreadsheet to build a comparison table and summary section." |

<Tip>
  If a file contains content Readdy should read, say that directly in your prompt. If a file is only an asset, describe where it should appear.
</Tip>

## Supported Files and Limits

| Input type                       | Supported formats                             | Limit                                      |
| -------------------------------- | --------------------------------------------- | ------------------------------------------ |
| **File attachments per message** | Any supported upload format                   | Up to **10 files**                         |
| **General file size**            | All supported upload formats                  | Up to **50 MB** per file                   |
| **Parseable PDF**                | PDF                                           | Up to **10 MB**                            |
| **Parseable data and text**      | CSV, XLSX, TXT                                | Up to **5 MB** per file                    |
| **Image file attachments**       | PNG, JPG, JPEG, GIF, WebP, SVG                | Up to **5 MB** per image                   |
| **Reference images**             | JPG, JPEG, PNG, WebP, SVG                     | Up to **5 images**, **5 MB** each          |
| **Other uploadable files**       | DOC, DOCX, XLS, PPT, PPTX, ZIP, RAR, MP4, MP3 | Uploadable, but not parsed as text or data |

| Plan        | Files storage limit |
| ----------- | ------------------- |
| Free / Lite | 200 MB              |
| Starter     | 1 GB                |
| Pro         | 5 GB                |

<Warning>
  Parseable files have stricter size limits than general uploads. Oversized PDF, CSV, XLSX, or TXT files are blocked before they are added to your message.
</Warning>

## Best Practices

* **Separate content from assets**: Use PDF, TXT, CSV, or XLSX when Readdy should read content. Use image and media files when Readdy should place assets in the site.
* **Name files clearly**: Names like `logo.svg`, `product-list.csv`, and `homepage-copy.pdf` make your prompt easier to follow.
* **Be explicit in the prompt**: Write "use the CSV as the product list" or "use the image as the hero background" instead of "use these files."
* **Name the target when using video**: Write "replace the hero image with `intro-video.mp4`" or select the element you want to change before sending the video attachment.
* **Convert unsupported documents before parsing**: Export DOC, DOCX, PPT, PPTX, or XLS files to PDF, TXT, CSV, or XLSX when Readdy needs to read them.
* **Clean up unused Files**: File attachments remain in the project Files library. Delete unused assets if you are close to the storage limit.

## Troubleshooting

<AccordionGroup>
  <Accordion title="Upload is blocked because the file type is unsupported">
    **Symptom:** Readdy shows an unsupported file type error.

    **Cause:** The file extension or MIME type is not in the supported upload list.

    **How to fix:**

    1. Use one of the supported upload formats listed above.
    2. Export documents or presentations to PDF if Readdy needs to read the content.
    3. Export older spreadsheets to CSV or XLSX if Readdy needs to parse rows and columns.
  </Accordion>

  <Accordion title="Upload is blocked because the file is too large">
    **Symptom:** Readdy shows a file size or parsing size limit error.

    **Cause:** General uploads can be up to 50 MB, but images and parseable files have smaller limits.

    **How to fix:**

    1. Keep image files under 5 MB.
    2. Keep parseable PDFs under 10 MB.
    3. Keep CSV, XLSX, and TXT files under 5 MB.
    4. Split large documents or datasets into smaller files.
  </Accordion>

  <Accordion title="Readdy uploaded my file but did not read its content">
    **Symptom:** The file appears in the input area, but the generated result does not use its text or data.

    **Cause:** The file may be uploadable but not parseable, or your prompt may not have asked Readdy to read it.

    **How to fix:**

    1. Make sure the file is PDF, CSV, XLSX, or TXT.
    2. Add a direct instruction like "read this PDF" or "use the rows in this spreadsheet."
    3. Convert DOC, DOCX, XLS, PPT, or PPTX files to a parseable format before sending.
  </Accordion>

  <Accordion title="I cannot see Upload Files or Browse Files">
    **Symptom:** The **"+"** menu does not show **"Upload Files"** or **"Browse Files"** in an existing project.

    **Cause:** You may not have permission to upload assets in that project, or file uploads may be temporarily blocked while another file upload task is running.

    **How to fix:**

    1. Ask the project owner to give you asset upload permission.
    2. Wait for the current upload task to finish, then open the **"+"** menu again.
  </Accordion>

  <Accordion title="Storage limit exceeded">
    **Symptom:** Readdy says there is not enough storage to upload the selected files.

    **Cause:** File attachments count toward your project Files storage limit.

    **How to fix:**

    1. Open the project's Files library.
    2. Delete unused files.
    3. Upload fewer or smaller files.
    4. Upgrade the plan if you need more storage.
  </Accordion>

  <Accordion title="My reference image was not accepted">
    **Symptom:** Readdy rejects the image or stops you from adding more reference images.

    **Cause:** Reference images support JPG, JPEG, PNG, WebP, and SVG files up to 5 MB each, with a limit of 5 images.

    **How to fix:**

    1. Use a supported reference image format.
    2. Compress the image below 5 MB.
    3. Remove one of the existing reference images before adding another.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Using Forms to Collect Leads
Source: https://docs.readdy.ai/features/form

Create and manage forms to capture leads, feedback, and user input from your website visitors with Readdy's form builder

Form helps you capture and manage form submissions from your website visitors. Whether you're collecting leads, feedback, or any other user input.

## You have two ways to create a form:

<Steps>
  <Step title="By Form Submission Button">
    Click the form submission button on the page to display the "Create Form" guide button. Click it to open the Form settings panel.

    <Frame>
      <video alt="Form submission button method demonstration" />
    </Frame>
  </Step>

  <Step title="By Selector Mode">
    In Selector mode, click any form element on the preview page to display the "Form" settings button. Click it to open the Form settings panel.

    <Frame>
      <video alt="Selector mode form element selection demonstration" />
    </Frame>
  </Step>
</Steps>

## Storage Configuration

<Info>
  You can choose to store data in a new form or select an existing form for better organization.
</Info>

After configuration, you can fill in and submit data in the preview interface. Click "Form" to verify if the data has been correctly stored in the form.

<Frame>
  <img alt="Form configuration interface" />
</Frame>

You can continue to modify the form. Data uploaded after modifications will still be stored in the previously configured form, though you can also change the form where data is stored.

## Data Management

<Frame>
  <img alt="Form submission settings interface" />
</Frame>

### Form Storage

Form helps you manage all form data stored in the project. You can export stored form data in .xlsx format for further analysis or processing.

### Submission Notifications

You can toggle submission notifications on or off to control when you receive alerts about new form submissions.

## Notes

<Tip>
  When you have the same form across multiple generated pages, you need to configure storage for each instance separately. Simply select to store all their data in the same form.
</Tip>

<Info>
  * Starter Plan has 50 submissions/month, Pro Plan has 10,000/month submissions.
  * The monthly limit refers to the number of submissions, not the storage limit. This is unrelated to whether you delete forms, but it depends on form submissions.
</Info>


# Generate Video Background
Source: https://docs.readdy.ai/features/generate-video

Transform static background images into dynamic videos for your hero sections and create engaging visual experiences

## Video Generation

Make your hero section or other big images stand out by transforming static background images into dynamic videos!

Readdy will automatically generate a suitable prompt based on your selected background image, or you can unleash your own creativity!

<Steps>
  <Step title="Activate Selector">
    Start by opening the **Selector Mode** to begin editing. This mode allows you to select elements on your page.

    <Frame>
      <img alt="Selector Mode activation interface" />
    </Frame>
  </Step>

  <Step title="Select the Image">
    Click the image you'd like to change to video.

    <Frame>
      <img alt="Video generation interface" />
    </Frame>
  </Step>
</Steps>

<Info>
  Video generation costs **150 credits** per operation.
</Info>

**Example Prompts:**

<Accordion title="Example 1: Snow-Capped Mountain Scene">
  **Prompt:** "The camera circles around a snow-capped mountain with many snow-covered plants. The sky is clear, and sunlight shines beautifully on the mountain."

  <Frame>
    <video alt="Snow-capped mountain video example" />
  </Frame>
</Accordion>

<Accordion title="Example 2: Paris Fashion Runway">
  **Prompt:** "A person walks down a Paris runway wearing a trench coat, with a tracking shot capturing their confident stride and the elegance of the garment against the backdrop of the fashion show."

  <Frame>
    <video alt="Paris fashion runway video example" />
  </Frame>
</Accordion>


# AEO/GEO Optimization
Source: https://docs.readdy.ai/features/geo-optimization

Enable llms.txt and per-page schema markup after your site is already live on a custom domain.

AEO/GEO Optimization helps AI crawlers and Google better understand your website after it is already live on a custom domain.

When you enable this option during a later publish, Readdy creates a site-wide `llms.txt` file and adds schema structured data to each page.

***

## Feature Highlights

AEO/GEO Optimization is an optional publish setting for React projects that have already been published successfully.

Once enabled, it helps:

* Create an `llms.txt` file for your website
* Add schema structured data to every page
* Make your content easier for AI crawlers and Google to understand

***

## Before You Start

<Info>
  This option is available only after your website has already been published once and connected to a custom domain.

  If you have not connected a custom domain yet, follow [Publish - for React Project](/features/publish-react-v2) first.
</Info>

This guide applies to React projects using Readdy's custom-domain publish flow.

***

## How to Enable It

<Steps>
  <Step title="Open a project that is already live">
    Go to the project that has already been published successfully on your custom domain.
  </Step>

  <Step title="Turn on Optimization AEO/GEO">
    Click **Publish** in the top-right corner. In the publish dialog, enable **Optimization AEO/GEO**.

    <Frame>
      <img alt="Publish dialog with the Optimization AEO/GEO toggle enabled" />
    </Frame>
  </Step>

  <Step title="Publish again to apply the optimization">
    Click **Update** to publish again. Readdy will then start generating `llms.txt` and page-level schema structured data for your site.

    <Warning>
      After you publish, this optimization may take some time to become available.
      This usually takes about 3 to 30 minutes, depending on how many pages your
      website has.
    </Warning>
  </Step>
</Steps>

***

## How to Verify

Open `https://yourdomain/llms.txt` in your browser, replacing `yourdomain` with your actual custom domain.

If the page is available, your `llms.txt` file has been created and the AEO/GEO optimization is in effect.

***

## FAQs

<Accordion title="Can I disable AEO/GEO Optimization after enabling it?">
  Yes. Open the publish dialog again and turn off the **Optimization AEO/GEO** toggle, then click **Update** to republish. The `llms.txt` file and schema markup will be removed after the next publish.
</Accordion>

<Accordion title="Will this affect my existing website content?">
  No. This feature only adds an `llms.txt` file and schema structured data. It does not modify your existing pages or content.
</Accordion>

***

## Need Help?

If this guide doesn't resolve your issue:

* Email: [hi@readdy.ai](mailto:hi@readdy.ai)
* Feedback: [https://readdy.ai/feedback](https://readdy.ai/feedback)


# Multiple Pages
Source: https://docs.readdy.ai/features/multiple-pages

Learn how to create and manage multiple pages in your React project

Readdy supports two different project types with different multi-page generation approaches:

* **React, Next.js Projects**: Managed as a complete project with shared components and state between pages
* **Other Projects** (HTML, Vue, etc.): Each page is managed as an independent project

<Note>
  We recommend using React Next.js project type as it provides better project cohesion and consistency between pages.
</Note>

## Check Project Type

Click the project name in the top-left corner and check the project code type in the popup window. React Next.js projects will display as `React-Next.js`

<Frame>
  <img alt="" />
</Frame>

***

## React Next.js Projects

### Creating New Pages

**AI Conversation Generation**

Directly chat with AI, describe the page functionality and content you need, and AI will automatically generate new pages.

**Example conversation:**

```
Please help me create a user profile page that includes:
- User avatar and basic information display
- Editable personal information form
- Save and cancel buttons
- Responsive layout
```

**Page Entry Click Generation**

When clicking links or buttons on existing pages, if the target page doesn't exist, the following situations will occur:

**Situation 1: "Continue Generation" prompt appears**

* Click the prompt button, enter `OK` or describe special requirements in the dialog box, and AI will continue generating the corresponding page

<Frame>
  <img alt="" />
</Frame>

<br />

<Frame>
  <img alt="" />
</Frame>

**Situation 2: Redirect to 404 page**

* Indicates the page hasn't been generated yet, describe page requirements in the AI dialog box on the right side

<Frame>
  <img alt="" />
</Frame>

**Example description:**

```
This is a product detail page that should include:
- Product image carousel
- Product name, price, description
- Add to cart button
- Related product recommendations
- User review section
```

### Page Navigation

There's a page address bar above the preview area. Click it to display a list of all generated pages, and click any page path to navigate.

<Frame>
  <img alt="" />
</Frame>

<Tip>
  For pages containing dynamic parameters (like `product/[id]`), specific page instances (like `product/1`, `product/2`) won't be displayed in the list. You need to click the corresponding links on the page to access these pages.
</Tip>

### 404 Page Handling

A 404 page is an error page displayed when users access non-existent pages. When encountering a 404 page in Readdy, you can chat with AI to continue generating page content, or design a user-friendly custom 404 page.

<Frame>
  <img alt="" />
</Frame>

**Custom 404 page example:**

```
Design a 404 error page that includes:
- Friendly error message text
- Simple black and white hand-drawn illustration
- Return to homepage button
```

***

## Non-Next.js Projects

### Generating New Pages

**New Page Button**

Click the **New Page** button in the top-left corner, and enter prompts and reference pages (optional) in the popup create page window.

<Frame>
  <img alt="" />
</Frame>

<Note>
  When creating new pages, you can select existing pages as references, which helps maintain design consistency between pages.

  <Frame>
    <img alt="" />
  </Frame>
</Note>

**"Continue Generation" Button**

When clicking links but the target page doesn't exist, the system will display a "Continue Generation" prompt. Click it and chat with AI to describe page requirements to generate new pages.

<Frame>
  <img alt="" />
</Frame>

### Page Linking

Use the **Selector tool** to select elements where you want to add links, choose the **Link** option in the properties panel, and select an existing target page from the list.

<Frame>
  <img alt="" />
</Frame>

***

## Why Can't Multiple Pages Be Generated Directly?

Main reasons:

* **AI Technical Limitations**: The model's context window is limited and cannot generate overly long content at once.
* **Quality Control**: Batch-generated pages may not match actual requirements, with high modification costs
* **Controllability**: Single-page generation allows you to better control that each page's content matches your expectations, avoiding generating many pages that don't meet your expectations, which would be problematic

<Warning>
  To ensure project quality and development efficiency, we strongly recommend using **one page or one feature at a time** generation approach.
</Warning>


# Notifications
Source: https://docs.readdy.ai/features/notifications

Stay informed with real-time updates on collaboration, invitations, and support responses

# Overview

Readdy's notification feature keeps you informed of important updates within the platform, ensuring you never miss critical information during collaboration.

## Collaboration Notifications

<div>
  <Frame>
    <img alt="Notifications center" />
  </Frame>
</div>

The notification center keeps you informed of all collaboration activities. You can access it by clicking the notification bell icon.

When working with team members on Readdy, you'll receive notifications for the following events:

### Member Invitations

When someone invites you to join a project, you'll receive an invitation notification. Simply click to accept and start collaborating.

### Invitation Status

As a project owner, you'll be notified when someone accepts your project invitation and joins the team.

### Project Changes

You'll be notified if:

* You are removed from a project
* A project you're a member of is deleted

### Role Changes

If your role changes on a project (such as from Editor to Viewer), you'll receive a notification to keep you informed of your current permissions.

## Support Ticket Replies

After submitting a support ticket, you'll receive an in-app notification when there's a reply. Click the notification to view the response.


# OG Preview Settings
Source: https://docs.readdy.ai/features/og-preview

Set the preview image, title, and description shown when your site is shared on social platforms

With OG Preview Settings, you can:

* **Control link preview cards**: Decide which image, title, and description appear when your site is shared
* **Keep your brand consistent**: Make shared link previews match your website and brand
* **Preview the result in real time**: See how your card may look on Facebook, X, and LinkedIn
* **Automatically sync Twitter Card data**: Readdy updates the related X / Twitter share card settings for you

<Info>
  OG settings are currently configured at the **project level**. This means one website uses one set of OG preview settings, and page-specific OG settings are not supported yet.
</Info>

<Warning>
  Before using OG Preview Settings, your project must already have **at least one generated version**. OG tags are written into a website version, so this feature cannot be used if the project has never generated a version.
</Warning>

<Frame>
  <img alt="Project state showing at least one generated version before entering OG Preview Settings" />
</Frame>

## What Is an OG Preview?

OG (Open Graph) is a standard used to control how a webpage appears when it is shared on social platforms. When you send a link to Facebook, X, LinkedIn, WeChat, Slack, and similar platforms, the platform reads the page metadata and generates a share card with an image, a title, and a description.

In this guide:

* **OG Preview Image** is the main image shown on the card
* **OG Title** is the card title
* **OG Description** is the card description

If these are not set, social platforms may show a blank card or randomly pick content from the page, which usually leads to poor results.

## How to Set It Up

<Steps>
  <Step title="Open Project Settings">
    First, make sure your project has generated at least one version. Then open **Project Settings** and find the **OG Preview** section.

    <Frame>
      <img alt="OG Preview section entry inside Project Settings" />
    </Frame>
  </Step>

  <Step title="Upload an OG Preview Image">
    Click the upload area to select an image. Current requirements:

    * **Formats**: `JPG`, `PNG`, `WebP`
    * **Max size**: **5 MB**
    * **Recommended size**: **1200 × 630**

    After you select an image, Readdy opens a cropper first. Once you confirm the crop, the image enters local preview mode so you can continue adjusting the title, description, and social card preview.

    If you do not want to use the image anymore, you can remove it.

    <div>
      <div>
        <Frame>
          <img alt="Crop dialog after uploading an OG preview image" />
        </Frame>
      </div>

      <div>
        <Frame>
          <img alt="Local preview state after confirming the image crop" />
        </Frame>
      </div>
    </div>
  </Step>

  <Step title="Edit the Title and Description">
    Fill in **OG Title** and **OG Description** for your share card.

    * **OG Title**: recommended within **60 characters**
    * **OG Description**: recommended within **155 characters**

    If either field is left empty, Readdy automatically falls back to the existing SEO `title` and `description`.
  </Step>

  <Step title="Preview the Social Card">
    The preview area updates in real time based on your current image, title, and description. You can switch between platform tabs to view how the card may appear on:

    * **Facebook**
    * **X / Twitter**
    * **LinkedIn**

    <Frame>
      <video />
    </Frame>

    If no image has been uploaded yet, the preview shows an empty placeholder state.

    <Frame>
      <img alt="Empty preview state when no image is uploaded" />
    </Frame>
  </Step>

  <Step title="Save Your Changes">
    Click **Save** to store your OG settings.

    Important behavior:

    * Uploading an image or editing fields only changes the local state first
    * Changes are saved only after you click **Save**
    * If nothing has changed, the save button remains disabled
    * Clicking **Cancel** restores the last saved state

    <Frame>
      <img alt="Save and Cancel action area for OG settings" />
    </Frame>
  </Step>

  <Step title="Republish the Latest Version">
    If saving your settings writes the new OG tags into a website version, you still need to **republish the latest version** before the live share card updates.

    Even if the save succeeds, social platforms will still see the old version until you republish.

    <Frame>
      <img alt="Success modal telling the user to republish the latest version" />
    </Frame>
  </Step>
</Steps>

<Info>
  The preview area is a **simulation**. Final card appearance may vary slightly across platforms because of caching, cropping rules, or platform UI differences.
</Info>

## Field Reference

| Setting                | Description                                                                          |
| ---------------------- | ------------------------------------------------------------------------------------ |
| Preview Image          | The main image shown on the share card. A 1200 × 630 landscape image is recommended. |
| Title                  | The share card title. If left empty, Readdy falls back to the SEO title.             |
| Description            | The share card description. If left empty, Readdy falls back to the SEO description. |
| X / Twitter Share Card | Synced automatically after saving. No separate setup is required.                    |

<Warning>
  If you remove the OG preview image, social platforms may stop showing an image or fall back to their own scraping logic.
</Warning>

## Best Practices

* Use a clear landscape image with a strong focal point
* Keep the title short so users can understand the page at a glance
* Use one concise sentence for the description instead of stuffing keywords
* After updating your settings, republish the latest version before validating the result on social platforms

<Tip>
  Social platforms often cache old preview cards. Even after you save and republish, it may still take a few minutes for the new preview to appear.
</Tip>

## FAQs

<AccordionGroup>
  <Accordion title="Why didn’t my new OG preview update immediately?">
    There are usually two possible reasons:

    1. You have not republished the latest version yet
    2. The social platform is still caching the previous preview

    First confirm that you have republished, then wait a few minutes and check again. Using an incognito window can also help verify the latest result.
  </Accordion>

  <Accordion title="Are OG Title and OG Description required?">
    No. If you leave them empty, Readdy automatically uses the existing SEO title and description.
  </Accordion>

  <Accordion title="Can I set different OG content for each page?">
    Not yet. This release supports project-level settings only, so one website uses one shared OG configuration.
  </Accordion>

  <Accordion title="Why is the save button disabled?">
    This usually means there are no unsaved changes. The save button becomes available only after the image, title, or description has changed.
  </Accordion>

  <Accordion title="Why does the preview domain look different from what I expected?">
    The preview tries to display your currently available published domain. If no usable domain is available yet, Readdy uses a placeholder domain in the preview.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide does not solve your issue:

* **Submit feedback**: [readdy.ai/feedback](https://readdy.ai/feedback)
* **Live chat**: Use the support entry in the top-right corner of Readdy

We’ll keep improving this guide.


# Outreach Campaign
Source: https://docs.readdy.ai/features/outreach-campaign

Find prospects, review lead data, and launch personalized websites and outreach emails in one campaign

<Info>
  **Prerequisites:** Outreach Campaign uses your plan's Outreach quota. Website
  generation costs **5 Credits per row**, and only successfully generated rows
  are charged. To send emails, bind a mailbox with **Google SMTP** or another
  **SMTP / IMAP** provider. Optional email warm-up is off by default and requires
  separate approval for each mailbox.
</Info>

## What Does This Feature Do?

**Outreach Campaign** helps you turn a lead list into a full outbound workflow inside Readdy:

1. Add leads with **AI Search**, a saved **Lead List**, or a `.csv` / `.xlsx` upload
2. Generate a personalized website for each prospect
3. Write one outreach email with dynamic variables
4. Send the campaign directly through **Readdy**

You can send emails without connecting Instantly first. Readdy supports binding your own mailbox through **Google SMTP** or **other SMTP / IMAP providers**, so you can complete the full setup in one place.

## Before You Start

### Step 1: Choose How to Add Leads

Before you start generation, choose where the campaign leads will come from.

| Option         | Use it when                                                                                  |
| -------------- | -------------------------------------------------------------------------------------------- |
| **AI Search**  | You want Readdy to find leads from a prompt, such as `Auto repair shops in Santa Clara, USA` |
| **Lead Lists** | You already created a saved list in **Lead Finder** and want to reuse it                     |
| **Upload CSV** | You already have a prospect file in `.csv` or `.xlsx` format                                 |

<Info>
  **Lead Finder pricing:** AI Search costs **2 Credits per target lead**. Readdy
  shows the estimated cost before you generate the list. Failed, canceled, and
  no-result searches are not charged.
</Info>

### CSV File Requirements

If you choose **Upload CSV**, prepare a prospect list in `.csv` or `.xlsx`
format before you upload it.

<Steps>
  <Step title="Open Excel or Google Sheets">
    Create a new blank spreadsheet, or open the exported file you want to clean
    up.
  </Step>

  <Step title="Fill in the header row">
    The first row contains column names. **You must include an `email` column.** You can add other columns as needed, for example:

    Example columns:

    * `business name`
    * `description`
    * `email`
    * `phone` (optional)
    * `address` (optional)

    Example rows:

    * `Baker Shop | Handmade baking for 10 years | zhang@example.com | 13800001111 | No.1 Happy Road`
    * `Flower Store | Fresh flower delivery | li@example.com | 13800002222 | No.2 Sunny Road`
  </Step>

  <Step title="Fill in the data (starting from row 2)">
    From the second row onward, each row represents one prospect. Each row will
    generate one personalized website.
  </Step>

  <Step title="Save as CSV or Excel format">
    In **Excel**, save the file as `.xlsx` or choose **CSV (Comma delimited)**. In
    **Google Sheets**, download it as **Microsoft Excel (.xlsx)** or **Comma
    Separated Values (.csv)**.
  </Step>
</Steps>

<Tip>
  Need a sample? On the Outreach Campaign page, click **Download Template** and
  fill in your own leads based on that format.
</Tip>

<Warning>
  **File Requirements**

  * Supported formats: `.csv` and `.xlsx`
  * Maximum file size: **5MB**
  * Single-upload row limit: **100 rows**
  * Required field: an `email` column
  * Email format: each email must be valid and contain `@`
</Warning>

### Plan and Quota Reference

Outreach Campaign currently uses two limit types:

* **Outreach quota**: how many prospects are included in your plan's Outreach allowance
* **Single upload limit**: how many prospect rows you can upload in one file

The current limits are:

| Plan       | Outreach quota | Single upload limit |
| ---------- | -------------- | ------------------- |
| Free       | 50             | 100                 |
| Starter    | 500            | 100                 |
| Pro        | 500            | 100                 |
| Agency     | 3000           | 100                 |
| Agency Pro | 20000          | 100                 |
| Ultimate   | Unlimited      | 100                 |
| Host-only  | Not supported  | N/A                 |

The single upload limit applies per uploaded `.csv` or `.xlsx` file. **Host-only** does not support Outreach Campaign.

## Campaign Flow

### Step 2: Add Leads to the Campaign

<Steps>
  <Step title="Open Outreach Campaign">
    Find **Outreach** in the left sidebar and open **Outreach Campaign**. If this
    is your first campaign, Readdy shows an empty state with **Add Leads**.

    <Frame>
      <img alt="Outreach Campaign empty state with Add Leads button" />
    </Frame>
  </Step>

  <Step title="Click Add Leads">
    Click **Add Leads** and choose one of the three lead source options.

    <Frame>
      <img alt="Add Leads page with AI Search, Lead Lists, and Upload CSV options" />
    </Frame>
  </Step>

  <Step title="Choose AI Search">
    Select **AI Search** to open **Lead Finder**. Use this path when you want
    Readdy to discover new leads from a plain-language prompt.

    <Frame>
      <img alt="Lead Finder home screen with prompt examples" />
    </Frame>
  </Step>

  <Step title="Choose Lead Lists">
    Select **Lead Lists** to open the saved list picker. Click a list to load its
    leads into the campaign **Data Preview** page.

    <Frame>
      <img alt="Select a Lead List dialog with saved lead lists" />
    </Frame>
  </Step>

  <Step title="Choose Upload CSV">
    Select **Upload CSV** to upload a `.csv` or `.xlsx` file, then review the
    imported rows in **Data Preview**.
  </Step>
</Steps>

### Step 3: Find Leads with AI Search

Use this flow when you choose **AI Search** from **Add Leads**, or when you open
**Lead Finder** directly from the left sidebar.

<Info>
  **Data source:** AI Lead Finder searches business data from **Google Maps**.
  For better results, use a common local business category with a clear
  location, such as `Barber shops in New York`, `Beauty salons in Paris`, or
  `Auto repair shops in Santa Clara`.
</Info>

<Steps>
  <Step title="Describe Your Ideal Leads">
    In **Find Leads**, describe the businesses you want to reach, then click
    **AI Search**. Include both a business type and location for better results.

    <Frame>
      <img alt="Lead Finder home screen with prompt examples" />
    </Frame>
  </Step>

  <Step title="Review the Search Plan">
    Readdy turns your prompt into a search plan. Review and adjust the fields
    before you click **Generate**.

    <Frame>
      <img alt="Lead Finder review search plan dialog" />
    </Frame>

    The search plan includes:

    * **Lead goal**: The business type or audience Readdy will search for
    * **Target count**: The number of leads you want Readdy to return
    * **Country**: The country used to narrow the search
    * **Location**: The city or area where Readdy should search
    * **Industry**: The Google Maps category Readdy uses to match businesses
    * **Minimum rating**: The lowest public rating a business can have
    * **Minimum reviews**: The minimum number of public reviews a business must have
    * **Estimated cost**: The maximum Credits required for the confirmed target count
  </Step>

  <Step title="Generate the Lead List">
    Click **Generate** to start the search. When the search finishes, open the
    **Lead Lists** tab to review the saved list.
  </Step>

  <Step title="Add the List to the Campaign">
    In **Lead Lists**, select the list you want to use, then click **Add to
    Campaign**. Readdy loads the lead list into the campaign **Data Preview** page.

    <Frame>
      <img alt="Lead Finder Lead Lists table with Add to Campaign button" />
    </Frame>
  </Step>
</Steps>

### Step 4: Review the Data Table

<Steps>
  <Step title="Review and Edit the Table">
    In **Data Preview**, check the leads before generation. Every cell in the
    preview table can be edited directly, so you can fix names, descriptions,
    emails, phone numbers, and addresses before continuing.

    <Frame>
      <img alt="Outreach Campaign data preview page with Upload Prospects and Add controls" />
    </Frame>
  </Step>

  <Step title="Add Rows or Columns">
    Click **Add** to insert more rows or custom columns if you want to enrich the
    lead data manually.
  </Step>

  <Step title="Click Next to Open Email Setting">
    When the data looks correct, click **Next** to start configuring the outreach
    email.
  </Step>
</Steps>

<Info>
  **Credits Calculation:** `number of rows x 5 Credits`

  Example: 20 rows = **100 Credits**

  Only **successfully** generated rows are charged.
</Info>

### Step 5: Write the Email Content

<Steps>
  <Step title="Fill in the subject">
    Enter your email subject in the **Subject** field.
  </Step>

  <Step title="Write the email body">
    Write your outreach message in the editor. You can use rich text formatting.
  </Step>

  <Step title="Insert variables">
    Click **Insert Variable** to add values from your uploaded columns. Readdy also prepares `{{Website_URL}}`, so each prospect receives the link to their own generated website.

    <Frame>
      <img alt="Email Setting content editor with subject, body and variable insertion menu" />
    </Frame>
  </Step>

  <Step title="Preview the email">
    Click **Preview** to check how the first row will look after variables are
    replaced.
  </Step>
</Steps>

### Step 6: Set the Sending Schedule

<Steps>
  <Step title="Choose a date range">
    Set the **Start date** and **End date** for the campaign.
  </Step>

  <Step title="Set the daily send window">
    Choose the hours during which emails can be sent each day.
  </Step>

  <Step title="Choose sending days">
    Select the days of the week for sending. Weekdays are the typical default.
  </Step>

  <Step title="Select the timezone">
    Choose the timezone that matches your campaign plan.

    <Frame>
      <img alt="Email sending schedule settings" />
    </Frame>
  </Step>
</Steps>

### Step 7: Bind Your Mailbox in Readdy

Readdy can send the campaign directly through your own mailbox. On the **Mailbox** step, click **SMTP / IMAP** to bind a new mailbox.

<Frame>
  <img alt="Bind mailbox dialog with Google and Other SMTP options" />
</Frame>

<Steps>
  <Step title="Open the Mailbox step">
    After finishing **Content** and **Schedule**, go to **Mailbox**.
  </Step>

  <Step title="Click SMTP / IMAP">
    Readdy opens the mailbox binding dialog.
  </Step>

  <Step title="Choose Google or Other">
    Choose **Google** if you want to use Gmail SMTP. Choose **Other** for any
    other SMTP / IMAP provider.
  </Step>

  <Step title="Complete the mailbox form">
    Fill in the sender name, sender email, username, password, and the SMTP / IMAP
    server information.
  </Step>
</Steps>

<Tip>
  Mailbox selection is optional before generation. You can start generating
  websites first, then come back later to bind a mailbox and launch the email
  campaign.
</Tip>

#### Manage optional email warm-up

Email warm-up is designed to gradually build your mailbox's sender reputation.
According to [Smartlead's warm-up guide](https://helpcenter.smartlead.ai/en/articles/52-how-to-enable-ai-email-account-warm-ups),
it simulates more natural sending and reply activity to help improve email
deliverability and reduce the chance that your cold outreach lands in spam. It
does not guarantee inbox placement or campaign results.

Warm-up is **off by default**. Binding or selecting a mailbox does not enable
it. To turn it on, click
**Warm-up off** beside a connected mailbox, review how Smartlead will use it,
and click **Agree & enable**. You can turn it off anytime without disconnecting
the mailbox or stopping your campaign.

<Frame>
  <img alt="Select Mailbox page with the Warm-up off setting highlighted" />
</Frame>

<Frame>
  <img alt="Email warm-up dialog with Keep off and Turn on warm-up options" />
</Frame>

#### Bind a Google SMTP mailbox

If you choose **Google**, Readdy automatically fills these Gmail server values for you:

* SMTP Host: `smtp.gmail.com`
* SMTP Port: `587`
* IMAP Host: `imap.gmail.com`
* IMAP Port: `993`

You only need to prepare an **App Password** from your Google account and paste it into the **Password** field in Readdy.

<Steps>
  <Step title="Open Google Account Settings">
    Go to [Google Account](https://myaccount.google.com/).
  </Step>

  <Step title="Open Security">
    Click [Security](https://myaccount.google.com/security) in your Google account settings.

    <Frame>
      <img alt="Google Account Security page" />
    </Frame>
  </Step>

  <Step title="Turn On 2-Step Verification">
    App Passwords are only available after 2-Step Verification is enabled.

    <Frame>
      <img alt="Google 2-Step Verification settings" />
    </Frame>
  </Step>

  <Step title="Create an App Password">
    Open **App passwords** from the Security page. If you do not see the entry, go directly to [App passwords](https://myaccount.google.com/apppasswords).

    <Frame>
      <img alt="Google App Passwords page" />
    </Frame>
  </Step>

  <Step title="Paste the Password into Readdy">
    Copy the generated app password and paste it into the **Password** field in
    Readdy's SMTP binding form.
  </Step>
</Steps>

#### Bind another SMTP / IMAP mailbox

If you choose **Other**, get the following information from your email provider and paste it into Readdy:

* **From Name**: the sender name recipients should see
* **From Email**: the mailbox address you want to send from
* **Username**: usually the same as your email address
* **Password**: your SMTP password or app password
* **SMTP Host / Port**: outgoing mail server details from your provider
* **IMAP Host / Port**: incoming mail server details from your provider

Common examples include company mailboxes from Google Workspace, Microsoft 365, Zoho, Fastmail, or your own hosting provider.

### Step 8: Start Website Generation

After your content and schedule are ready, click **Start Generate**.

<Steps>
  <Step title="Click Start Generate">
    Readdy saves your email content, schedule, and mailbox settings, then opens
    the generation confirmation dialog.
  </Step>

  <Step title="Confirm the generation">
    Review the number of websites and the credit usage, then confirm.

    <Frame>
      <img alt="Generate confirmation dialog showing website count and credit usage" />
    </Frame>
  </Step>
</Steps>

<Warning>
  Starting generation does **not** send emails immediately. It only starts
  generating websites and saves your email setup for later sending.
</Warning>

### Step 9: Start Sending with Readdy

When you are ready to launch the email campaign, use the email action on the Progress or Results page and open **Start Send**.

<Steps>
  <Step title="Open Start Send">
    Click the email button in the top right of the campaign and open **Start
    Send**.
  </Step>

  <Step title="Select at least one available mailbox">
    Choose the mailbox you want Readdy to use for this campaign. If you want to
    use optional email warm-up, open the mailbox's warm-up settings and approve
    it separately. You do not need to enable warm-up to send the campaign.
  </Step>

  <Step title="Click Send with Readdy">
    If website generation is already complete, Readdy starts sending right away.
    If websites are still generating, Readdy saves the setup and automatically
    sends after generation finishes.
  </Step>
</Steps>

### Step 10: Track Website Generation, Review Results, and Refresh Website URLs

After generation starts, Readdy processes each row one by one.

| Stage        | Description                             |
| ------------ | --------------------------------------- |
| Waiting      | In queue, not started yet               |
| Creating     | Creating the project                    |
| Generating   | Generating website content              |
| Getting Link | Creating the website link               |
| Success      | Website generation is complete          |
| Failed       | Something went wrong and can be retried |

<Frame>
  <img alt="Generation progress page showing row statuses" />
</Frame>

On the Results page, you can:

* Copy website links
* Import successful rows as projects
* Retry failed rows
* Download the results
* Open **Start Send** or **Email Analysis**

<Frame>
  <img alt="Generation results page with email action and retry options" />
</Frame>

<Warning>
  Keep the browser open while generation is running. If the page is closed or
  refreshed, the task may pause. You can reopen it later and click **Continue**
  to resume.
</Warning>

#### Not happy with a generated website?

If a generated website needs more work, select the successful row and click
**Import as Project**. Readdy will convert it into a regular project so you can
continue editing it in the normal project workspace.

After you finish editing that imported project, return to **Outreach Campaign**
and refresh the website link in the **Website URL** column to pull the newest
version.

* Use the refresh icon in the **Website URL** column header to refresh links in
  bulk
* Use the refresh icon in a specific row to refresh only that row's latest URL

<Frame>
  <img alt="Outreach Campaign results table with Website URL refresh buttons highlighted" />
</Frame>

### Step 11: View Email Analytics

After sending starts, the email button changes to **Email Analysis**. There you can check campaign performance:

<Frame>
  <img alt="Campaign analytics dashboard with open rate, click rate and conversions" />
</Frame>

| Metric            | Description                                    |
| ----------------- | ---------------------------------------------- |
| Sequences Started | Number of emails that entered the sending flow |
| Open Rate         | Percentage of recipients who opened the email  |
| Click Rate        | Percentage of recipients who clicked a link    |
| Opportunities     | Number of interested recipients                |
| Conversions       | Number of final deals or completed goals       |

## Optional: Use Instantly Instead of Readdy

If you prefer to send through **Instantly**, you can still do that. Readdy keeps **Readdy** as the default send channel, but you can switch to **Instantly** before the first send.

<Steps>
  <Step title="Open Send Channel">
    In **Edit Email** or **Start Send**, click **Send Channel** in the top right.
  </Step>

  <Step title="Choose Instantly and Click Connect">
    In the **Send Channel** popup, choose **Instantly** and click **Connect**.

    <Frame>
      <img alt="Send Channel popup with Instantly connect option" />
    </Frame>
  </Step>

  <Step title="Connect Your Instantly Workspace">
    Paste your Instantly API key and connect the workspace.

    <Frame>
      <img alt="Connect Instantly page in Email Setting" />
    </Frame>
  </Step>

  <Step title="Select the Instantly Mailboxes">
    Choose the mailbox or mailboxes you want Instantly to use.

    <Frame>
      <img alt="Mailbox selection in Email Setting" />
    </Frame>
  </Step>

  <Step title="Confirm the Channel and Send with Instantly">
    Confirm the channel switch, then choose **Send with Instantly** for this task.
  </Step>
</Steps>

<Warning>
  Once a campaign has already started sending, the send channel is locked for
  that task. Switch the channel before the first send if you want to use
  Instantly.
</Warning>

## Limits Summary

### Outreach Campaign Limits

| Limit               | Details                                                           |
| ------------------- | ----------------------------------------------------------------- |
| Plan availability   | Supported on Free, Starter, Pro, Agency, Agency Pro, and Ultimate |
| Spreadsheet format  | `.csv` and `.xlsx`                                                |
| File size           | Maximum **5MB**                                                   |
| Single upload limit | **100 rows** per file                                             |
| Required column     | Must include `email`                                              |
| Email format        | Each email must be valid                                          |
| Credits cost        | **5 Credits** per row, charged only for successful rows           |
| Browser requirement | Keep the browser open during generation                           |
| Tab limit           | Only one tab can run batch generation at a time                   |

Current Outreach quotas:

| Plan       | Outreach quota | Single upload limit |
| ---------- | -------------- | ------------------- |
| Free       | 50             | 100                 |
| Starter    | 500            | 100                 |
| Pro        | 500            | 100                 |
| Agency     | 3000           | 100                 |
| Agency Pro | 20000          | 100                 |
| Ultimate   | Unlimited      | 100                 |
| Host-only  | Not supported  | N/A                 |

### Sending Limits

| Limit               | Details                                                     |
| ------------------- | ----------------------------------------------------------- |
| Default channel     | **Readdy**                                                  |
| Optional channel    | **Instantly** before the first send                         |
| Mailbox requirement | Select at least one available mailbox before sending        |
| Email warm-up       | Off by default; requires separate approval for each mailbox |
| Email content       | Subject and body are required                               |
| Edit rule           | Pause an active campaign before editing                     |
| Deletion            | Deleting a campaign cannot be undone                        |

## FAQ

<AccordionGroup>
  <Accordion title="File upload says 'File must contain an email column'?">
    Check whether your `.csv` or `.xlsx` file includes an `email` column.

    Extra spaces in the column name can cause validation issues. Letter case does
    not matter, so `Email`, `EMAIL`, and `email` all work. Using Readdy's template
    is the safest option.
  </Accordion>

  <Accordion title="File upload says 'Invalid email format'?">
    Check the row numbers shown in the error message. Those emails may be missing
    `@`, include extra spaces, or use incomplete domains.
  </Accordion>

  <Accordion title="What if I do not have a client list yet?">
    Start with [Find Clients for the
    Agency](https://docs.readdy.ai/tricks/find-clients). It walks you through how
    to collect prospects, export a `.csv` file, and bring that file back into
    Outreach Campaign.
  </Accordion>

  <Accordion title="Can I start generation before binding a mailbox?">
    Yes. Mailbox binding is optional before generation. You can finish **Content**
    and **Schedule**, click **Start Generate**, and come back later to bind a
    mailbox and launch sending.
  </Accordion>

  <Accordion title="Can I connect Gmail with SMTP?">
    Yes. Choose **Google** in the SMTP / IMAP binding dialog, enable Google 2-Step
    Verification, create an App Password, and paste that password into Readdy.
  </Accordion>

  <Accordion title="Can I connect other mailboxes besides Gmail?">
    Yes. Choose **Other** in the SMTP / IMAP dialog and fill in the SMTP / IMAP
    host, port, username, and password provided by your email service.
  </Accordion>

  <Accordion title="Does binding or selecting a mailbox enable email warm-up?">
    No. Email warm-up is off by default and is separate from campaign sending.
    To enable it, click **Warm-up off** beside a connected mailbox, review the
    Smartlead activity, and click **Agree & enable**. The approval applies only
    to that mailbox, and you can turn warm-up off anytime without disconnecting
    the mailbox or stopping your campaign.
  </Accordion>

  <Accordion title="What happens if I click Send while websites are still generating?">
    Readdy saves your sending setup and automatically starts sending after website
    generation finishes successfully.
  </Accordion>

  <Accordion title="Accidentally closed the browser during generation?">
    Reopen the campaign and click **Continue**. Successful rows will be kept, and
    the remaining rows can continue from where the task paused.
  </Accordion>

  <Accordion title="Shows 'Batch generation is running in another tab'?">
    Only one browser tab can run batch generation at a time. Close the other tab,
    refresh the current page, and try again. If needed, wait a moment for the lock
    to release.
  </Accordion>

  <Accordion title="How many emails per mailbox per day is recommended?">
    We recommend **20 to 30 emails per mailbox per day** to help protect
    deliverability.
  </Accordion>

  <Accordion title="How do I view campaign performance?">
    Open **Email Analysis** from the email button in the campaign. There you can
    review open rate, click rate, opportunities, and conversions.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Agents
Source: https://docs.readdy.ai/features/proactive-agent-guide

Use Agents to run SEO checks, diagnose rankings, plan content, monitor sites, and automate recurring work

Agents helps you run an agency with an AI teammate that checks SEO, diagnoses ranking problems, plans content, watches every published site's numbers, and runs recurring work on a schedule. This guide walks through each page in the Agents sidebar.

<CardGroup>
  <Card title="Tasks & chat" icon="message" href="#tasks--chat">
    Describe what you need in plain language — each request becomes a Task with a live, streaming report.
  </Card>

  <Card title="Dashboard" icon="gauge" href="#dashboard">
    Every published site at a glance: yesterday's visitors, form submissions, leads, and appointments.
  </Card>

  <Card title="SEO toolkit" icon="magnifying-glass-chart" href="#seo-check">
    Four one-click checks: full SEO audit, local SEO, ranking diagnosis, and content planning.
  </Card>

  <Card title="Scheduled Tasks" icon="clock" href="#scheduled-tasks">
    Run tasks daily, weekly, or monthly — or chain them so one task follows another automatically.
  </Card>
</CardGroup>

## Tasks & chat

Click **New Task** (or the **+** button) and tell the agent what you need — the composer asks *"How can I help your agency today?"*. Starter chips give you one-tap prompts like **Check my SEO**, **Why am I not ranking?**, and **Plan my content**.

Each request opens a **Task**: a chat session where the agent works and streams its findings back to you. Your tasks are listed in the sidebar so you can return to any of them.

<Tip>
  Tasks keep running in the background. A pulsing dot next to a task in the sidebar means the agent is still working on it — you can browse other pages and come back without interrupting anything.
</Tip>

A few things you may see inside a task:

* **Follow-up questions** — the agent may ask you to choose between options before continuing.
* **Connect Google Search Console** — some checks read your Google Search Console data (rankings, clicks, impressions). If your site isn't connected yet, a **Connect** banner appears right in the chat; click it, authorize with Google, and the task picks up from there.
* **Retry** — if the connection drops mid-task, a Retry button reruns the last step without retyping anything.

To delete a task, hover over it in the sidebar and use the **⋯** menu.

## Dashboard

The **Dashboard** shows your whole portfolio in one screen.

### Site cards

Every published site gets a card with **yesterday's numbers**:

| Metric           | Shown                             |
| ---------------- | --------------------------------- |
| Visitors         | Always, with a day-over-day trend |
| Form Submissions | Always                            |
| Chatbot Leads    | When there are any                |
| Appointments     | When there are any                |

Sites with an SEO health score show it as a badge on the card.

### Per-site view

Click any site card to open its mini dashboard — the same four metrics plus the site's recent leads. Each stat deep-links into the matching Readdy page (Analytics, Forms, Leads, or Appointments), so drilling down is one click.

### To review

The **To review** chip in the top-right corner collects anything the agent has prepared that needs your sign-off before it takes effect. When the counter lights up, open the panel, look over each card, and **Approve** or **Reject** it. Nothing goes live on your sites without your approval.

The Dashboard also has the New Task composer at the top, so you can start a task without leaving the page.

## SEO Check

**SEO Check** runs a full SEO health audit for any of your sites:

<Steps>
  <Step title="Pick a site">
    Choose one of your sites from the dropdown (or type any domain).
  </Step>

  <Step title="Run check">
    The report streams into a new Task. The agent crawls the site, detects its business type, and runs the specialist checks.
  </Step>

  <Step title="Read the report">
    You get a **0–100 health score** with per-category scores, covering technical SEO, on-page, content quality, schema, Core Web Vitals, AI-search readiness, and images — plus a qualitative read on E-E-A-T and whether AI engines can quote your content.
  </Step>

  <Step title="Act on the plan">
    Fixes are grouped **Critical / High / Medium**, each with its business impact in plain language and a specific fix. The agent then offers to apply the fixes for you by updating the site with Readdy.
  </Step>
</Steps>

## Local Check

**Local Check** is for businesses that live or die by Google Maps and the local pack. Pick a site and run it; the agent identifies the business (name, category, service area) from the site, then assesses:

<AccordionGroup>
  <Accordion title="Google Business Profile" icon="store">
    Category fit, claimed status, star rating, and review count — it flags fewer than \~10 reviews or a rating under 4.0.
  </Accordion>

  <Accordion title="NAP consistency" icon="address-card">
    Whether the business name, address, and phone match across the site, its LocalBusiness schema, and listings.
  </Accordion>

  <Accordion title="On-page local signals" icon="location-dot">
    LocalBusiness schema completeness, opening hours, tap-to-call, and an embedded map.
  </Accordion>

  <Accordion title="Nearby competitors" icon="users">
    Who ranks in the local pack for the core service, and how the business compares on reviews.
  </Accordion>
</AccordionGroup>

Like the SEO Check, results come back as a prioritized Critical / High / Medium plan, and the agent offers to apply the on-page fixes with Readdy.

## Ranking Fix

**Ranking Fix** answers one question: *why isn't my page ranking for this keyword?*

Enter a site and a target keyword (e.g. "emergency plumber near me"). The agent reads the current Google results **backwards** — what page type, content shape, length, headings, schema, and media Google is actually rewarding for that keyword — then compares your page against the top results, detects page-type mismatches, and scores your page from the perspective of likely searchers.

The report tells you plainly why the page isn't ranking and exactly what to change, grouped Critical / High / Medium, with an offer to update the page for you.

<Tip>
  Ranking Fix works best for one page × one keyword. If you want the whole site checked, run **SEO Check** instead; if you want to know what pages to create, use **Content Plan**.
</Tip>

## Content Plan

**Content Plan** turns one seed keyword into a complete content architecture:

1. Enter a seed keyword (e.g. "driving lessons"). Optionally pick a site so internal-link suggestions use your real pages.
2. The agent expands it into related keywords and groups them by **actual Google SERP overlap** — not text similarity — into a hub-and-spoke structure.
3. You get one **pillar page** plus its **supporting pages**, each with a target keyword, search intent, and a one-line angle, plus the internal linking map showing which pages link to which.

The result is a concrete build list, and the agent offers to create the pillar and supporting pages on your site with Readdy.

## Skills

The **Skills** page shows everything your agent knows how to do, in two tabs.

### Built-in

Platform skills maintained by Readdy — for example **Site Management**, which lets the agent create, edit, preview, and publish website projects on Readdy. These are read-only and always up to date.

### My Skills

You can teach the agent your own repeatable work — a report format, a checklist, a workflow you run often:

<Steps>
  <Step title="Create a skill">
    Click **New** and fill in three fields: a name, a short description, and the instructions the agent should follow.
  </Step>

  <Step title="The agent picks it up">
    In new tasks, the agent uses your skill's **description** to decide when it applies, then follows your instructions.
  </Step>

  <Step title="Edit or delete anytime">
    Use the pencil and trash icons on each skill. Deleting asks for confirmation first.
  </Step>
</Steps>

Limits to keep in mind:

* Up to **20 custom skills** per account.
* Descriptions are capped at **200 characters**.
* Custom skills are private to your account.

<Tip>
  Write the description like a trigger condition, not a summary. "Use when I ask for a monthly traffic summary for a client site" triggers far more reliably than "traffic helper".
</Tip>

## Scheduled Tasks

The **Scheduled** page puts your agent on autopilot — every task here runs on its own, without you opening the app.

### Creating a task

Click **New Task** and fill in the form:

* **Task Name** — e.g. `daily-seo-check`.
* **Trigger** — how the task starts (see below).
* **Site** — optionally scope the task to one site so the agent doesn't have to figure it out.
* **Instructions** — what the agent should do each run.

<Tabs>
  <Tab title="On a schedule">
    Pick a frequency — **daily**, **weekdays**, **weekly** (choose one or more days), or **monthly** (choose the date) — and a time of day. Times are shown and entered in **your local timezone**.

    Power users can switch to **Advanced (cron)** and enter a raw 5-field cron expression instead — note that cron expressions are evaluated in **UTC**, with 1-minute minimum granularity.
  </Tab>

  <Tab title="After another task">
    Chain tasks: pick a predecessor from the **Run after** dropdown, and this task starts automatically when the selected task **finishes successfully**. You need at least one scheduled task before you can chain another after it.
  </Tab>
</Tabs>

<Note>
  A task's trigger can't be changed after creation. To switch a task from a schedule to a chain (or vice versa), create a new task.
</Note>

### Chains

Chained tasks show an **↳ after …** badge in the list. Chaining lets you build multi-step routines without guessing at timing:

```text theme={null}
09:00  Run SEO audit          (on a schedule)
  ↳    Publish a blog post    (after: Run SEO audit)
  ↳    Summarize the results  (after: Publish a blog post)
```

A chained task runs only when its predecessor **succeeds** — if a step fails, the chain stops there, so you never get half-finished follow-ups.

### Managing tasks

* **Enable / disable** — every task has a toggle, in the list and in the task detail. Disabled tasks stay configured but don't run (and don't trigger anything chained after them).
* **Run history** — open a task to see its past runs and results.
* **Delete** — stops the task permanently; its run history is kept.

## FAQ

<AccordionGroup>
  <Accordion title="Will the agent change my site without asking?">
    No. Anything the agent prepares that would change your sites lands in the Dashboard's **To review** queue, and only goes live after you approve it.
  </Accordion>

  <Accordion title="Why do scheduled times look different for a teammate?">
    The simple schedule picker displays times in each viewer's local timezone. The underlying schedule is the same moment for everyone. (Advanced cron expressions are always UTC.)
  </Accordion>

  <Accordion title="Why didn't my chained task run?">
    Chained tasks run only when the predecessor finishes **successfully**. Check the predecessor's last run — if it failed or is disabled, the chain stopped there.
  </Accordion>

  <Accordion title="What period do the Dashboard numbers cover?">
    Site cards show **yesterday's** visitors, form submissions, chatbot leads, and appointments, with a day-over-day trend on visitors.
  </Accordion>

  <Accordion title="A task asked me to connect Google Search Console — why?">
    Checks that read real search performance (rankings, clicks, impressions) need access to your Search Console. Click the **Connect** banner in the chat, authorize with Google, and rerun — the connection is remembered for that site.
  </Accordion>

  <Accordion title="Can I close the app while a task is running?">
    You can freely switch to other pages — running tasks keep going, marked by a pulsing dot in the sidebar. Long-running work like scheduled tasks runs entirely on our servers, whether or not the app is open.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Project settings
Source: https://docs.readdy.ai/features/project-settings





# Project Transfer
Source: https://docs.readdy.ai/features/project-transfer

Transfer a Readdy project to another account so the new owner can take over without rebuilding it from scratch

Project Transfer lets you move a project from one Readdy account to another. This is useful when you need to hand a project over to a client, a teammate, or another account you own.

The current owner sends an invite first. Once the recipient accepts it, they become the new owner of the project.

<Info>
  Only the current project owner can start a transfer, and each project can only have one active transfer invite at a time.
</Info>

## What's Included in the Transfer

When a transfer is completed, the recipient receives:

* The project, including forms, agent configuration, integrations, and collaborators
* The custom domain, if the project still has a connected domain when the recipient accepts the invite

<Note>
  The recipient gets the latest version of the project at the moment they accept the invite. Project Transfer does not lock the project to a snapshot from when the invite was first sent.
</Note>

## Send a Transfer Invite

<Steps>
  <Step title="Open the transfer entry">
    Go to the project panel, click the **Project Setting** menu, then select **Transfer Project** after entering the page.

    After you send the invite, this same menu entry changes to **Manage transfer**.
  </Step>

  <Step title="Choose the recipient">
    Enter the recipient's email address, then choose who they are.

    Readdy checks that the email is valid and makes sure you are not transferring the project to yourself. If the recipient is already a collaborator on the project, you can select their email from the suggestion list.

    <Frame>
      <img alt="Transfer project dialog with recipient email and role selection" />
    </Frame>
  </Step>

  <Step title="Review the transfer details">
    Review the project name, recipient email, what will be included, and the transfer options.

    At this step, you can choose whether to keep your viewer role after the transfer and whether the new owner can keep chat history and version history.

    <Frame>
      <img alt="Transfer project confirmation step showing included items and transfer options" />
    </Frame>
  </Step>

  <Step title="Send the invite">
    Click **Confirm Transfer** to send the invite.

    The recipient can accept the transfer from the invite email or from the Readdy inbox. You can also copy the invite link and share it directly.

    <Frame>
      <img alt="Transfer project success step with invite link and Manage Transfer action" />
    </Frame>
  </Step>
</Steps>

## Manage an Active Transfer

After the invite has been sent, open **Manage transfer** to review or update it.

You can:

* Check the recipient, transfer status, and expiration date
* Copy the invite link
* Resend the invite
* Cancel the transfer

<Frame>
  <img alt="Manage Transfer dialog with recipient, status, expiration, and actions" />
</Frame>

<Tip>
  If the invite expires before the recipient accepts it, use **Manage transfer** to resend a new invite.
</Tip>

## Accept a Transfer Invite

To accept the transfer, the recipient must sign in with the same email address that received the invite.

<Steps>
  <Step title="Open the invite">
    Open the invite from the transfer email or from the Readdy inbox.

    <Frame>
      <img alt="Readdy inbox notification showing a project transfer invite with Accept and Decline buttons" />
    </Frame>
  </Step>

  <Step title="Review the transfer details">
    Before accepting, the recipient can review the sender, project name, expiration time, and the items included in the transfer.

    <Frame>
      <img alt="Accept Project Transfer dialog showing transfer details and Accept button" />
    </Frame>
  </Step>

  <Step title="Accept or decline the project">
    Click **Accept** to complete the transfer. If the recipient does not want to receive the project, they can click **Decline** instead.

    Recipients on a free plan must upgrade to a paid subscription before they can accept the project.

    <Frame>
      <img alt="Transfer Complete screen confirming the recipient is now the new owner" />
    </Frame>
  </Step>
</Steps>

## Transfer Options

<AccordionGroup>
  <Accordion title="Keep viewer role after transfer">
    If this option is enabled, you stay in the project as a viewer after the transfer is completed. If it is turned off, you will lose access once the recipient becomes the new owner.
  </Accordion>

  <Accordion title="Keep chat history and version history">
    If this option is enabled, the new owner can see the previous chat conversation and version history in the chat panel. If it is disabled, the new owner will only see the latest version and will not be able to view the conversation history.
  </Accordion>
</AccordionGroup>

## Troubleshooting

<AccordionGroup>
  <Accordion title="Recipient sees a wrong account message">
    **Symptom:** The recipient opens the invite and sees a "wrong account" message instead of the Accept screen.

    **Cause:** The recipient is signed in with a different email address than the one that received the invite.

    **How to fix:**

    1. Sign out of the current account.
    2. Sign in with the email address that received the invite.
    3. Open the invite again from the email or the Readdy inbox.
  </Accordion>

  <Accordion title="Recipient cannot accept on a free account">
    **Symptom:** The recipient sees a prompt to upgrade and cannot click **Accept**.

    **Cause:** Project Transfer requires the recipient to have an active paid subscription before they can take over the project.

    **How to fix:** Ask the recipient to upgrade to a paid plan, then reopen the invite and click **Accept**.
  </Accordion>

  <Accordion title="Invite has expired">
    **Symptom:** The recipient opens the invite and sees an "invite expired" message.

    **Cause:** Transfer invites expire after 7 days if not accepted.

    **How to fix:**

    1. As the sender, open **Manage transfer** on the project card.
    2. Click **Resend invite** to send a new one.
    3. The recipient opens the new invite and accepts it before it expires.
  </Accordion>

  <Accordion title="Recipient has reached their project limit">
    **Symptom:** The recipient cannot accept the transfer because their account is at the project limit for their current plan.

    **Cause:** Each plan has a maximum number of projects. The recipient's account is already at that maximum.

    **How to fix:** The recipient either upgrades to a higher plan or removes an existing project to free up a slot, then accepts the transfer.
  </Accordion>

  <Accordion title="Will project transfer cause data loss or temporarily take my website offline?">
    Usually not. In normal cases, project transfer does not cause data loss or temporary downtime. Only in rare or extreme cases where the transfer fails might you run into this kind of issue. If that happens, please submit a support ticket as soon as possible, and we will investigate and help resolve it promptly.
  </Accordion>

  <Accordion title="Can I send a second invite while one is still pending?">
    No. A project can only have one active transfer invite at a time. If you need to transfer the project to someone else, cancel the current invite from **Manage transfer** first, then start a new transfer.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Publish Your Website
Source: https://docs.readdy.ai/features/publish

Step-by-step guide to publishing your Readdy website online

<Info>
  If your project is a **React** project, please refer to [Publish-for React Project](/features/publish-react-v2).
</Info>

Once you've created a project, you can publish it to the internet so that others can access your site. This guide will walk you through the steps to publish your project online. Before you begin, please make sure your website is fully built and ready to go live.

## 1. Go to the Project Publish Page

Navigate to your project generate page and click the **Publish** button in the top right corner.

<Frame>
  <img />
</Frame>

## 2. Choose Whether You Already Have a Domain

<Tip>
  **What is domain?**\
  A domain is the address of a website. For example, Google’s domain is google.com.
  To make your website accessible online, you need to purchase a domain and publish your website to it. Others can then visit your website through this domain.
</Tip>

* If you already have your own domain, select **Yes, I already have a domain**. This guide will walk you through connecting your domain to the project and publishing it.
* If you don’t have a domain yet, select **No, I need to buy a domain**. We support purchasing a new domain via IONOS. [How to Buy a Domain >](/features/publish-purchase-domain)

<br />

<Frame>
  <img />
</Frame>

After selecting **Yes**, click **Next** to start connecting your domain.

<Frame>
  <img />
</Frame>

## 3. Connect a Custom Domain

You'll begin with Step 1 of the domain connecting process. Enter the domain you want to use in the input field. Please note: a domain can only be bound to one website, so make sure the domain is purchased and not already in use.

<Frame>
  <img />
</Frame>

After entering your domain, click **Next**. The system will validate the domain. If validation is successful, you'll proceed to Step 2.

### Common Domain Validation Errors

If validation fails, you'll see a red error message. Here's how to interpret and resolve common errors:

<Accordion title="Please enter a correct domain">
  The domain format is incorrect. Ensure there's only one "." and no trailing spaces. A valid domain looks like `google.com`.
</Accordion>

<Accordion title="This domain has not been purchased by you yet">
  You haven't purchased this domain. Click **Previous** and select "No, I need to buy a domain" to follow the guided purchase flow.
</Accordion>

<Accordion title="This domain is already bound to xxx. Please unbind it first.">
  The domain is already connected to another of your projects. Unbind it there before proceeding.
</Accordion>

<Accordion title="This domain is already bound to another user's project. Please use a different domain.">
  The domain is in use by another user. Choose a different one. If you're sure the domain belongs to you but still get this message, please contact our support team to reclaim it.
</Accordion>

<Frame>
  <img />
</Frame>

## 4. Configure DNS Records

After proceeding to Step 2, you’ll see a tutorial video titled "**How to Set up DNS**". Watch this video carefully if you're unfamiliar with DNS setup.

<Frame>
  <img />
</Frame>

Watch this video carefully if you're unfamiliar with DNS setup.

<Frame>
  <video />
</Frame>

### A written guide is also available:

1. Go to your domain provider's website (e.g., GoDaddy)
2. Access the DNS settings or DNS management page
3. Delete all existing A records
4. Add a new A record with the following values:
   * **Type**: A
   * **Name**: @
   * **Value**: 52.37.165.222

### Setup Instructions by Provider

To connect your custom domain to your Readdy website, you need to configure DNS records through your domain provider. In this guide, we provide step-by-step instructions for several common domain providers.

<Tip>
  We provide step-by-step guides for popular domain providers. If your domain was purchased from another provider, you can refer to the GoDaddy example. The general steps are very similar across most providers.

  For assistance, contact us at [hi@readdy.ai](mailto:hi@readdy.ai) or use our online support chat.
</Tip>

<Accordion title="GoDaddy">
  **Step 1: Log in to GoDaddy**

  * Open a new tab in your browser, go to [www.godaddy.com/](http://www.godaddy.com/) and log in. Locate ACCOUNT in the top-right corner of the page, and click **My Products**, you will see your domain.

  <Frame>
    <img />
  </Frame>

  **Step 2: Find your domain's DNS Management page**

  * Find the domain you want to connect and click **DNS** to navigate to its DNS Management page.

  <Frame>
    <img />
  </Frame>

  <br />

  <Frame>
    <img />
  </Frame>

  **Step 3: Update your DNS records**

  * Scroll down on the DNS Management page, and you will see all the DNS records for the current domain.

  <Frame>
    <img />
  </Frame>

  Based on your domain, you need to update these three types of DNS records: **A**, **CNAME**, **TXT** (subject to what is actually displayed on the Readdy interface).

  * If you connect a root domain, such as `xxxxxx.com`，you need to update A + TXT
  * If you connect a subdomain, such as `www.xxxxxx.com`，you need to update CNAME + TXT

  <Tip>
    Here we'll use an **A** record as an example; the update process for **CNAME** and **TXT** is exactly the same.
  </Tip>

  First, you need to delete the old records where  **Type=A** and **Name=@** that may cause conflicts.

  <Frame>
    <img />
  </Frame>

  **Then add a new record:**

  > Type: A\
  > Name: @\
  > Value: 52.37.165.222\
  > TTL: 600

  <Frame>
    <img />
  </Frame>

  <br />

  <Frame>
    <img />
  </Frame>

  Based on the content displayed on the Readdy interface, if there are additional **TXT** or **CNAME** records that need to be updated, use the same method to update them: delete all records with the same Type and Name, and add the required records.

  <Frame>
    <img />
  </Frame>

  After updating all records, you will have completed the domain DNS configuration. Please return to Readdy, click **I've added the records** and continue.
</Accordion>

<Accordion title="Hostinger">
  **Step 1: Log in to Hostinger**

  * Open a new tab in your browser, go to [https://hpanel.hostinger.com/](https://hpanel.hostinger.com/) and log in. You will see your domain on the home page.

  <Frame>
    <img />
  </Frame>

  **Step 2: Find your domain's DNS Management page**

  * Go to the **Domain portfolio** page and click the domain you want to connect.

  <Frame>
    <img />
  </Frame>

  * Navigate to **DNS / Nameservers** page where you can manage the DNS records.

  <Frame>
    <img />
  </Frame>

  **Step 3: Update your DNS records**

  * Scroll down on the DNS / Nameservers page, and you will see all the DNS records for the current domain.

  <Frame>
    <img />
  </Frame>

  Based on your domain, you need to update these three types of DNS records: **A**, **CNAME**, **TXT** (subject to what is actually displayed on the Readdy interface).

  * If you connect a root domain, such as `xxxxxx.com`，you need to update A + TXT
  * If you connect a subdomain, such as `www.xxxxxx.com`，you need to update CNAME + TXT

  <Tip>
    Here we'll use an **A** record as an example; the update process for **CNAME** and **TXT** is exactly the same.
  </Tip>

  First, you need to delete the old records where  **Type=A** and **Name=@** that may cause conflicts.

  <Frame>
    <img />
  </Frame>

  **Then add a new record:**

  > Type: A\
  > Name: @\
  > Value: 52.37.165.222\
  > TTL: 60

  <Frame>
    <img />
  </Frame>

  <Frame>
    <img />
  </Frame>

  Based on the content displayed on the Readdy interface, if there are additional TXT or CNAME records that need to be updated, use the same method to update them: delete all records with the same Type and Name, and add the required records.

  <Frame>
    <img />
  </Frame>

  After updating all records, you will have completed the domain DNS configuration. Please return to Readdy, click **I've added the records** and continue.
</Accordion>

<Accordion title="Cloudflare">
  **Step 1: Log in to Cloudflare**

  * Open a new tab in your browser, go to [https://dash.cloudflare.com/](https://dash.cloudflare.com/) and log in. You will see your domain on the Account home page.

  <Frame>
    <img />
  </Frame>

  **Step 2: Find your domain's DNS Management page**

  * Click the domain you want to connect.

  <Frame>
    <img />
  </Frame>

  * Click **DNS Records** to access to the DNS management page.

  <Frame>
    <img />
  </Frame>

  <br />

  <Frame>
    <img />
  </Frame>

  **Step 3: Update your DNS records**

  Based on your domain, you need to update these three types of DNS records: **A**, **CNAME**, **TXT** (subject to what is actually displayed on the Readdy interface).

  * If you connect a root domain, such as `xxxxxx.com`，you need to update A + TXT
  * If you connect a subdomain, such as `www.xxxxxx.com`，you need to update CNAME + TXT

  <Tip>
    Here we'll use an **A** record as an example; the update process for **CNAME** and **TXT** is exactly the same.
  </Tip>

  First, you need to delete the old records where  **Type=A** and **Name="your domain"** that may cause conflicts.

  <Frame>
    <img />
  </Frame>

  **Then add a new record:**

  > Type: A\
  > Name: @\
  > IPv4 address (Value): 52.37.165.222\
  > TTL: 1 min\
  > And very importent: switch Proxy status from Proxied to **DNS only**

  <Frame>
    <img />
  </Frame>

  <br />

  <Frame>
    <img />
  </Frame>

  Based on the content displayed on the Readdy interface, if there are additional **TXT** or **CNAME** records that need to be updated, use the same method to update them: delete all records with the same Type and Name, and add the required records.

  <Frame>
    <img />
  </Frame>

  After updating all records, you will have completed the domain DNS configuration. Please return to Readdy, click **I've added the records** and continue.
</Accordion>

<Accordion title="Namecheap">
  **Step 1: Log in to Cloudflare**

  * Open a new tab in your browser, go to [www.namecheap.com](http://www.namecheap.com) and log in. Locate Account in the top-right corner of the page, and click **Domain list**, you will see your domain.

  <Frame>
    <img />
  </Frame>

  **Step 2: Find your domain's DNS Management page**

  * Find the domain you want to connect and click **MANAGE**.

  <Frame>
    <img />
  </Frame>

  * Click **Advanced DNS** to access to the DNS management page.

  <Frame>
    <img />
  </Frame>

  <br />

  <Frame>
    <img />
  </Frame>

  **Step 3: Update your DNS records**

  Based on your domain, you need to update these three types of DNS records: **A**, **CNAME**, **TXT** (subject to what is actually displayed on the Readdy interface).

  * If you connect a root domain, such as `xxxxxx.com`，you need to update A + TXT
  * If you connect a subdomain, such as `www.xxxxxx.com`，you need to update CNAME + TXT

  <Tip>
    Here we'll use an **A** record as an example; the update process for **CNAME** and **TXT** is exactly the same.
  </Tip>

  First, you need to delete the old records where  **Type=A Record** and **Host=@** that may cause conflicts.

  <Frame>
    <img />
  </Frame>

  **Then add a new record:**

  > Type: A Record\
  > Host: @\
  > Value: 52.37.165.222\
  > TTL: 1 min

  <Frame>
    <img />
  </Frame>

  <br />

  <Frame>
    <img />
  </Frame>

  Based on the content displayed on the Readdy interface, if there are additional **TXT** or **CNAME** records that need to be updated, use the same method to update them: delete all records with the same Type and Name, and add the required records.

  <Frame>
    <img />
  </Frame>

  After updating all records, you will have completed the domain DNS configuration. Please return to Readdy, click **I've added the records** and continue.
</Accordion>

<Accordion title="Squarespace Configuration">
  **DNS Settings Steps:**

  1. Click on **DNS**, then select **DNS Settings**
  2. Scroll down to the **Custom Records** section
  3. Click **Add Record** to input the DNS information provided by Readdy

  <Frame>
    <img />
  </Frame>

  <Frame>
    <img />
  </Frame>
</Accordion>

<Accordion title="Wix Configuration">
  **DNS Settings Steps:**

  1. Go to **Domains** in your Wix account
  2. Click the **Domain Actions** icon next to the domain you want to connect
  3. Select **Manage DNS records**

  <Frame>
    <img />
  </Frame>

  <br />

  <Frame>
    <img />
  </Frame>

  4. Scroll down to the record type you need to add (e.g., A, CNAME, TXT), then click **+ Add Record**
  5. Enter the DNS record values exactly as provided by Readdy

  <Tip>
    If Readdy instructs you to enter @ in the Host Name field, leave the field blank instead (Wix treats a blank host name as @).
  </Tip>

  6. Click **Save**
  7. In the pop-up message, click **Save Changes** to confirm
</Accordion>

<Accordion title="WordPress Configuration">
  **DNS Settings Steps:**

  1. Visit your site's dashboard
  2. Navigate to **Upgrades** → **Domains** (or **Hosting** → **Domains** if you're using WP Admin) to view all the domains associated with your site
  3. Click on the domain you want to configure
  4. Select **DNS records** and click the **Manage** button
  5. In the top-right corner, click **Add a record**

  <Frame>
    <img />
  </Frame>

  6. In the **Type** dropdown, choose the type of DNS record you need to add (e.g., A, CNAME, TXT, etc.)

  <Frame>
    <img />
  </Frame>

  7. Enter the DNS record information exactly as provided by Readdy
  8. Save your changes to complete the update
</Accordion>

<Accordion title="Bluehost Configuration">
  **DNS Settings Steps:**

  1. Log in to your Bluehost Account Manager
  2. From the left navigation menu, click **Hosting**

  <Info>
    If you have multiple hosting packages, be sure to select the correct one and tap **MANAGE**.
  </Info>

  <Frame>
    <img />
  </Frame>

  3. Scroll down to Quick Links and tap **CPANEL**

  <Frame>
    <img />
  </Frame>

  4. On the cPanel dashboard, scroll to the **Domains** section and click **Zone Editor**
  5. In the Zone Editor, click the **+** icon next to the type of DNS record you'd like to add (e.g., A, CNAME, TXT)
  6. Fill in the required fields using the DNS values provided by Readdy

  <Frame>
    <img />
  </Frame>
</Accordion>

### Verify DNS Configuration

Once you've added the record, return to Readdy and click **"I've added the record"** to check the DNS status.

<Frame>
  <img />
</Frame>

If you see "**Record added, please wait for DNS propagation**", it indicates that DNS has been configured correctly and you need to wait for the propagation to complete, which may take 10-30 minutes.

<Frame>
  <img />
</Frame>

When the status shows **"Success"**, your DNS setup is complete. Click **Publish** to publish your site.

<Frame>
  <img />
</Frame>

<Tip>
  To allow access through a www​. subdomain, check "**Add www​.yourdomain​.com**" and create a CNAME record accordingly in your domain provider's settings.

  <Frame>
    <img />
  </Frame>
</Tip>

### DNS Troubleshooting

If there are issues, you may see these messages:

<Accordion title="Please follow the video tutorial above to add this DNS record to your domain provider, then wait 1 minute and try again.">
  Double-check that your record exactly matches the example.
</Accordion>

<Accordion title="This domain has multiple A records configured. Please delete other A records.">
  Delete all A records except the one pointing to 52.37.165.222.

  <Frame>
    <img />
  </Frame>
</Accordion>

<Accordion title="This domain is already bound to xxx. Please unbind it first.">
  Unbind the domain from other projects before proceeding.
</Accordion>

<Accordion title="This domain is already bound to another user's project. Please use a different domain.">
  Choose a different domain.
</Accordion>

## 5. Publish the Project

After clicking **Publish**, Readdy will start the publishing process. You'll see a progress screen. Please wait until it completes.

<Frame>
  <img />
</Frame>

🎉 **Congratulations!**\
Your site is now live. Click **"View My Website"** to view your published site.

<Frame>
  <img />
</Frame>

## 6. Update Your Website

Whenever you make changes to your site — such as creating new pages or editing content — you'll need to republish the project for those updates to go live.

<Tip>
  Don't worry — you won't need to reconfigure your domain or DNS. Just click the **Publish** button again to publish the latest version of your project.
</Tip>

<Frame>
  <img />
</Frame>

***

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Purchase a New Domain
Source: https://docs.readdy.ai/features/publish-purchase-domain

Purchase and set up a custom domain for your Readdy website to establish professional online presence

Once you've created a project, you can publish it to the internet for others to access. To do this, you need to purchase a domain and publish your website to it. This guide will walk you through the domain purchase process.

## 1. Go to the Project Publish Page

Navigate to your project generate page and click the **Publish** button in the top right corner. Then click **Publish on Custom Domain**.

<Frame>
  <img />
</Frame>

After clicking **Publish on Custom Domain**, you'll see the Domain Settings page. Here you have two options:

* **Connect an Existing Domain**: If you already own a domain, click **Connect Domain** to link it. See [How to Connect a Domain and Publish a Project >](/features/publish-react-v2).
* **Purchase a New Domain**: If you need a new domain, click **Purchase a New Domain**. This guide will walk you through the purchase process.

<Frame>
  <img />
</Frame>

## 2. Purchase a New Domain

> **What is a domain?**
> A domain is the address of a website. For example, Google's domain is `google.com`. With a custom domain, your website address could be something like `yourbrand.com`.

<Accordion title="Step 1: Enter Your Domain">
  Enter the domain you want to purchase and click **Check** to see if it's available for registration.

  <Frame>
    <img />
  </Frame>

  <Tip>
    * Domains usually consist of letters/numbers and TLD, e.g., `google.com` (TLD is the last part of a domain, like `com` in `google.com`)
    * No need to add www in front of the domain, e.g., <code><del>www</del><del>.</del>google.com</code>
  </Tip>
</Accordion>

<Accordion title="Step 2: Buy a Domain">
  Domain prices vary based on your subscription plan (monthly/yearly). Select your preferred option and proceed with purchase.

  <Frame>
    <img />
  </Frame>

  <Tip>
    * If the domain you entered is already taken, you can choose another domain from **Other recommended domains** or enter a new domain and click **Check**.
    * If the domain TLD is not supported, you need to change to a supported TLD.
      TLD is the last part of a domain, like `com` in `google.com`.
  </Tip>
</Accordion>

<Accordion title="Step 3: Enter Domain Contact Information">
  Fill in your contact information accurately, as it will be used to register your domain.

  > Please ensure all information is correct and valid.

  <Frame>
    <img />
  </Frame>
</Accordion>

<Accordion title="Step 4: Select Your Subscription Plan">
  <Tip>
    **Yearly plan users can skip this step.**
  </Tip>

  Select your subscription plan, then click **Buy** to complete the payment.

  <Tip>
    We recommend upgrading to an yearly plan — besides discounted Credits, you'll also get one free domain (up to \$15 value).
  </Tip>

  <Frame>
    <img />
  </Frame>
</Accordion>

## 3. Wait for Domain Purchase and Publish

Once the payment is submitted, return to the Readdy. You will see **Domain Purchasing…** and the purchase process may take approximately **15 minutes** to complete.

> You can continue editing your project in the meantime and return later to check the status.

<Frame>
  <img />
</Frame>

Next, you need to verify your email address. If verification is not successful within 14 days, your purchased domain will be inaccessible.

<Frame>
  <img />
</Frame>

Readdy will automatically publish your website. Publishing may take a few additional minutes.

<Frame>
  <img />
</Frame>

Congratulations! You have now successfully purchased a domain and published your project. Click View My Website to see your live site.

<Frame>
  <img />
</Frame>

## 4. Publish Changes to Your Website

<Tip>
  **If you make changes to your project later, you need to republish your website to apply the updates.**
</Tip>

Click the "Publish" button in the top right corner, then click "Update" to apply your changes to your published website.

<Frame>
  <img />
</Frame>

If you want to switch to a different domain, you will need to add the DNS records of your new domain. For detailed instructions, see [Publish Your Website >](/features/publish)

***

## Troubleshooting

**Purchase Fails**
If the domain was registered by someone else during payment, you can try purchasing a different domain. If issues persist, contact our support team.

**Publishing Fails**
If publishing fails, you can retry the process. If problems continue, reach out to our online support for assistance.

***

## Need Help?

If this guide doesn't resolve your issue, contact us at [hi@readdy.ai](mailto:hi@readdy.ai) or use our **live chat** in right top corner of Readdy. We're here to help!

<Frame>
  <img />
</Frame>

Thank you for using Readdy — and best of luck with your website launch! ❤️


# Publish - for React Project
Source: https://docs.readdy.ai/features/publish-react-v2

Step-by-step guide to publishing your Readdy website online

<Info>
  This guide is specifically for **React** projects. If your project uses a different framework (HTML, Vue, Vue-Ant Design, Vue-Element, Vue2, React-Ant Design, React-Shadcn, or UniApp), please refer to [Publish](/features/publish).
</Info>

This guide will walk you through the steps to publish your project online. Before you begin, please make sure your website is fully built and ready to go live.

## Go to the Domain Settings Page

Click Publish button in the top-right corner of the page, and click **Publish on Custom Domain** to access the domain settings page.

<Frame>
  <img />
</Frame>

## Connect an Existing Domain

If you already own a domain, Click **Connect Domain**.

<Tip>
  **What is domain?**\
  A domain is the address of a website. For example, Google’s domain is google.com. To publish your website, you need a domain first. [Buy New Domain](/features/publish-purchase-domain)
</Tip>

<Frame>
  <img />
</Frame>

## Step 1. Enter Your Own Domain

Enter the domain you want to connect and click **Next**.

<Frame>
  <img />
</Frame>

In some cases, you'll see a red error message. Here's how to interpret and resolve errors:

<Accordion title="Please enter a correct domain, e.g., xxx.com">
  The domain format is incorrect. Ensure there's only one "." and no trailing spaces.\
  A correct domain looks like `google.com`.
</Accordion>

<Accordion title="This domain has not been purchased by you yet">
  First, check that your domain is entered correctly. If the domain is correct, it means you haven't purchased this domain yet. Click **Previous** and choose [Buy New Domain](/features/publish-purchase-domain).
</Accordion>

<Accordion title="This domain is already connected to xxx. Please unbind it first.">
  This domain is already connected to another one of your project (**xxx** means the project's name). You need to remove it from that project before proceeding.
</Accordion>

<Accordion title="This domain is already connected to another user's project.">
  This domain is in use by another user. Please choose a different one. If you're sure the domain belongs to you, please contact our support team to reclaim it.
</Accordion>

## Step2. Set Up DNS of Your Domain

You need to set up the DNS of your domain to make it point to Readdy. Please follow the guide displayed on the interface.

<Frame>
  <img />
</Frame>

### DNS Setup Guide

We provide detailed guides for four domain providers: GoDaddy, Hostinger, Cloudflare, and Namecheap. If your DNS is managed by a different provider, you can use those guides as a reference. If you need help, feel free to contact us.

<Accordion title="GoDaddy">
  **Step 1: Log in to GoDaddy**

  * Open a new tab in your browser, go to [www.godaddy.com/](http://www.godaddy.com/) and log in. Locate ACCOUNT in the top-right corner of the page, and click **My Products**, you will see your domain.

  <Frame>
    <img />
  </Frame>

  **Step 2: Find your domain's DNS Management page**

  * Find the domain you want to connect and click **DNS** to navigate to its DNS Management page.

  <Frame>
    <img />
  </Frame>

  <br />

  <Frame>
    <img />
  </Frame>

  **Step 3: Update your DNS records**

  * Scroll down on the DNS Management page, and you will see all the DNS records for the current domain.

  <Frame>
    <img />
  </Frame>

  Based on your domain, you need to update these three types of DNS records: **A**, **CNAME**, **TXT** (subject to what is actually displayed on the Readdy interface).

  * If you connect a root domain, such as `xxxxxx.com`，you need to update A + TXT
  * If you connect a subdomain, such as `www.xxxxxx.com`，you need to update CNAME + TXT

  <Tip>
    Here we'll use an **A** record as an example; the update process for **CNAME** and **TXT** is exactly the same.
  </Tip>

  First, you need to delete the old records where  **Type=A** and **Name=@** that may cause conflicts.

  <Frame>
    <img />
  </Frame>

  **Then add a new record:**

  > Type: A\
  > Name: @\
  > Value: 52.37.165.222\
  > TTL: 600

  <Frame>
    <img />
  </Frame>

  <br />

  <Frame>
    <img />
  </Frame>

  Based on the content displayed on the Readdy interface, if there are additional **TXT** or **CNAME** records that need to be updated, use the same method to update them: delete all records with the same Type and Name, and add the required records.

  <Frame>
    <img />
  </Frame>

  After updating all records, you will have completed the domain DNS configuration. Please return to Readdy, click **I've added the records** and continue.
</Accordion>

<Accordion title="Hostinger">
  **Step 1: Log in to Hostinger**

  * Open a new tab in your browser, go to [https://hpanel.hostinger.com/](https://hpanel.hostinger.com/) and log in. You will see your domain on the home page.

  <Frame>
    <img />
  </Frame>

  **Step 2: Find your domain's DNS Management page**

  * Go to the **Domain portfolio** page and click the domain you want to connect.

  <Frame>
    <img />
  </Frame>

  * Navigate to **DNS / Nameservers** page where you can manage the DNS records.

  <Frame>
    <img />
  </Frame>

  **Step 3: Update your DNS records**

  * Scroll down on the DNS / Nameservers page, and you will see all the DNS records for the current domain.

  <Frame>
    <img />
  </Frame>

  Based on your domain, you need to update these three types of DNS records: **A**, **CNAME**, **TXT** (subject to what is actually displayed on the Readdy interface).

  * If you connect a root domain, such as `xxxxxx.com`，you need to update A + TXT
  * If you connect a subdomain, such as `www.xxxxxx.com`，you need to update CNAME + TXT

  <Tip>
    Here we'll use an **A** record as an example; the update process for **CNAME** and **TXT** is exactly the same.
  </Tip>

  First, you need to delete the old records where  **Type=A** and **Name=@** that may cause conflicts.

  <Frame>
    <img />
  </Frame>

  **Then add a new record:**

  > Type: A\
  > Name: @\
  > Value: 52.37.165.222\
  > TTL: 60

  <Frame>
    <img />
  </Frame>

  <Frame>
    <img />
  </Frame>

  Based on the content displayed on the Readdy interface, if there are additional TXT or CNAME records that need to be updated, use the same method to update them: delete all records with the same Type and Name, and add the required records.

  <Frame>
    <img />
  </Frame>

  After updating all records, you will have completed the domain DNS configuration. Please return to Readdy, click **I've added the records** and continue.
</Accordion>

<Accordion title="Cloudflare">
  **Step 1: Log in to Cloudflare**

  * Open a new tab in your browser, go to [https://dash.cloudflare.com/](https://dash.cloudflare.com/) and log in. You will see your domain on the Account home page.

  <Frame>
    <img />
  </Frame>

  **Step 2: Find your domain's DNS Management page**

  * Click the domain you want to connect.

  <Frame>
    <img />
  </Frame>

  * Click **DNS Records** to access to the DNS management page.

  <Frame>
    <img />
  </Frame>

  <br />

  <Frame>
    <img />
  </Frame>

  **Step 3: Update your DNS records**

  Based on your domain, you need to update these three types of DNS records: **A**, **CNAME**, **TXT** (subject to what is actually displayed on the Readdy interface).

  * If you connect a root domain, such as `xxxxxx.com`，you need to update A + TXT
  * If you connect a subdomain, such as `www.xxxxxx.com`，you need to update CNAME + TXT

  <Tip>
    Here we'll use an **A** record as an example; the update process for **CNAME** and **TXT** is exactly the same.
  </Tip>

  First, you need to delete the old records where  **Type=A** and **Name="your domain"** that may cause conflicts.

  <Frame>
    <img />
  </Frame>

  **Then add a new record:**

  > Type: A\
  > Name: @\
  > IPv4 address (Value): 52.37.165.222\
  > TTL: 1 min\
  > And very importent: switch Proxy status from Proxied to **DNS only**

  <Frame>
    <img />
  </Frame>

  <br />

  <Frame>
    <img />
  </Frame>

  Based on the content displayed on the Readdy interface, if there are additional **TXT** or **CNAME** records that need to be updated, use the same method to update them: delete all records with the same Type and Name, and add the required records.

  <Frame>
    <img />
  </Frame>

  After updating all records, you will have completed the domain DNS configuration. Please return to Readdy, click **I've added the records** and continue.
</Accordion>

<Accordion title="Namecheap">
  **Step 1: Log in to Cloudflare**

  * Open a new tab in your browser, go to [www.namecheap.com](http://www.namecheap.com) and log in. Locate Account in the top-right corner of the page, and click **Domain list**, you will see your domain.

  <Frame>
    <img />
  </Frame>

  **Step 2: Find your domain's DNS Management page**

  * Find the domain you want to connect and click **MANAGE**.

  <Frame>
    <img />
  </Frame>

  * Click **Advanced DNS** to access to the DNS management page.

  <Frame>
    <img />
  </Frame>

  <br />

  <Frame>
    <img />
  </Frame>

  **Step 3: Update your DNS records**

  Based on your domain, you need to update these three types of DNS records: **A**, **CNAME**, **TXT** (subject to what is actually displayed on the Readdy interface).

  * If you connect a root domain, such as `xxxxxx.com`，you need to update A + TXT
  * If you connect a subdomain, such as `www.xxxxxx.com`，you need to update CNAME + TXT

  <Tip>
    Here we'll use an **A** record as an example; the update process for **CNAME** and **TXT** is exactly the same.
  </Tip>

  First, you need to delete the old records where  **Type=A Record** and **Host=@** that may cause conflicts.

  <Frame>
    <img />
  </Frame>

  **Then add a new record:**

  > Type: A Record\
  > Host: @\
  > Value: 52.37.165.222\
  > TTL: 1 min

  <Frame>
    <img />
  </Frame>

  <br />

  <Frame>
    <img />
  </Frame>

  Based on the content displayed on the Readdy interface, if there are additional **TXT** or **CNAME** records that need to be updated, use the same method to update them: delete all records with the same Type and Name, and add the required records.

  <Frame>
    <img />
  </Frame>

  After updating all records, you will have completed the domain DNS configuration. Please return to Readdy, click **I've added the records** and continue.
</Accordion>

<Accordion title="Other Domain Providers">
  We currently offer basic guides for the providers listed below. More comprehensive guides and additional providers are coming soon.

  <Accordion title="Squarespace Configuration">
    **DNS Settings Steps:**

    1. Click on **DNS**, then select **DNS Settings**
    2. Scroll down to the **Custom Records** section
    3. Click **Add Record** to input the DNS information provided by Readdy

    <Frame>
      <img />
    </Frame>

    <Frame>
      <img />
    </Frame>
  </Accordion>

  <Accordion title="Wix Configuration">
    **DNS Settings Steps:**

    1. Go to **Domains** in your Wix account
    2. Click the **Domain Actions** icon next to the domain you want to connect
    3. Select **Manage DNS records**

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>

    4. Scroll down to the record type you need to add (e.g., A, CNAME, TXT), then click **+ Add Record**
    5. Enter the DNS record values exactly as provided by Readdy

    <Tip>
      If Readdy instructs you to enter @ in the Host Name field, leave the field blank instead (Wix treats a blank host name as @).
    </Tip>

    6. Click **Save**
    7. In the pop-up message, click **Save Changes** to confirm
  </Accordion>

  <Accordion title="WordPress Configuration">
    **DNS Settings Steps:**

    1. Visit your site's dashboard
    2. Navigate to **Upgrades** → **Domains** (or **Hosting** → **Domains** if you're using WP Admin) to view all the domains associated with your site
    3. Click on the domain you want to configure
    4. Select **DNS records** and click the **Manage** button
    5. In the top-right corner, click **Add a record**

    <Frame>
      <img />
    </Frame>

    6. In the **Type** dropdown, choose the type of DNS record you need to add (e.g., A, CNAME, TXT, etc.)

    <Frame>
      <img />
    </Frame>

    7. Enter the DNS record information exactly as provided by Readdy
    8. Save your changes to complete the update
  </Accordion>

  <Accordion title="Bluehost Configuration">
    **DNS Settings Steps:**

    1. Log in to your Bluehost Account Manager
    2. From the left navigation menu, click **Hosting**

    <Info>
      If you have multiple hosting packages, be sure to select the correct one and tap **MANAGE**.
    </Info>

    <Frame>
      <img />
    </Frame>

    3. Scroll down to Quick Links and tap **CPANEL**

    <Frame>
      <img />
    </Frame>

    4. On the cPanel dashboard, scroll to the **Domains** section and click **Zone Editor**
    5. In the Zone Editor, click the **+** icon next to the type of DNS record you'd like to add (e.g., A, CNAME, TXT)
    6. Fill in the required fields using the DNS values provided by Readdy

    <Frame>
      <img />
    </Frame>
  </Accordion>
</Accordion>

### Update your DNS records

First, follow the guide above ↑ to update the records displayed in the interface. Due to varying cache mechanisms across different domain providers, DNS updates may take anywhere from a few minutes to several hours to propagate. Please be patient during this process.\
We recommend **waiting at least 10 minutes after updating**, then click "I've updated records" to continue.

<Info>
  If the DNS records are still not detected after waiting more than 30 minutes, please carefully verify that the DNS records you added are correct. If needed, you can take a screenshot and submit it to our live chat support for assistance.
</Info>

<Frame>
  <img />
</Frame>

After successfully adding your DNS records, you need to wait for those changes to propagate globally (this typically takes 5-30 minutes, depending on your domain provider).

<Info>
  For faster propagation, set your TTL to a lower value such as 1 minute (the minimum TTL varies by DNS provider). Please wait at least 5 minutes, then click **Check DNS status** to check the DNS propagation status.
</Info>

<Frame>
  <img />
</Frame>

Once the DNS records have propagated successfully, you can publish your website.

<Frame>
  <img />
</Frame>

Congratulations! Your website is now live.

<Frame>
  <img />
</Frame>

## Update Your Website

Whenever you create a new version of your website, you'll need to update the changes to make them live.

<Tip>
  Don't worry, you won't need to set up DNS once more. Just click the **Update** button to publish the latest version of your project.
</Tip>

<Frame>
  <img />
</Frame>

***

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Select to Edit & Quick Edit
Source: https://docs.readdy.ai/features/select-to-edit-and-quick-edit

Edit directly in Preview via chat or visual actions. Ship new versions faster and stay in control.

## Overview

<Tip>
  The feature previously called “Selector” is now “Select to Edit.”
</Tip>

`Select to Edit` and `Quick Edit` provide two complementary workflows for editing your page in Preview. You can select an element and describe changes in the Chat, or edit content directly on the page and review those changes in a Quick Edit list. Both workflows let you submit updates to generate a new version. **Stay focused on content editing and outcomes. Fewer reruns, shorter waits, fewer credits used.**

In Selector, you pick the target element in Preview, then describe your intent in natural language (e.g., replace a headline, update a button label, add a card). AI processes your request and returns a new version.

In `Quick Edit`, you make inline changes to text, links, images, etc. All edits are collected into a “`Quick Edits`” pending list where you can review, undo, delete, or send them all at once, keeping each set of changes clear and controlled.

## Why use Select to Edit & Quick Edit?

* **Faster feedback**: edit inline in Preview or describe your change in a sentence and quickly see results.
* **Two workflows, no conflict**: chat-driven and quick editing are mutually exclusive, preventing mixed-method issues.
* **Controlled batch submission**: the `Quick Edit` list lets you confirm each change before sending, keeping edits atomic and reviewable.
* **Powerful in-place actions**: `Select Parent`, Select Stacked Layer, Undo, Delete, Add/Edit Link, Upload/Replace Image, Remove/Regenerate Background, Generate Video...

## Terminology

| Terms           | Explainations                                                                |
| --------------- | ---------------------------------------------------------------------------- |
| Select to Edit  | Toggle to select elements in Preview for editing.                            |
| Tag label       | The element type name shown near the top-left of the element.                |
| Edit Bar        | Action bar anchored to the selected element.                                 |
| Quick Edit list | A list of pending edits created by direct on-page changes, prior to sending. |
| Send            | Submit your edits to generate a new version.                                 |
| Discard         | Abandon the current batch of pending edits and clear the list.               |

## How It Works

### 1. Ways to select elements

#### 1.1 Quick-select text for inline edits (Select to Edit OFF)

* Double‑click plain text in the Preview to jump straight into edit mode and change the copy in place.
* To preserve real-page interactions, interactive components (e.g., links, buttons, inputs, embedded widgets) do not open inline edit on double‑click. If you need to edit them, turn on Select to Edit.
  <video />

#### 1.2 Select Parent (Select to Edit ON)

> In the code, elements are nested.

* When a target element is hard to grab, use the `Select Parent` button in the Edit bar to move up the hierarchy and quickly select the parent element.
* Each `Select Parent` click climbs one level to the outer wrapper.
  <Frame>
    <img alt="Select Parent" />
  </Frame>

#### 1.3 Select from stacked layers (Select to Edit ON)

* When multiple layers overlap and the bottom layer is hard to click, hover the target area and right‑click to open the layer list under the cursor.
* Choose the exact layer you want—this is the most convenient and precise way to select overlapped elements.

<Frame>
  <img alt="Select Element from List" />
</Frame>

### 2. Select to Edit (Chat-driven workflow)

> Use this when you want to describe changes in natural language and let the system handle them.

**Steps**

1. Toggle `Select to Edit` `⌥ S`.
2. Hover and click the target element.
3. Go to the Chat panel:
   * Start typing your request.
   * Write clear, targeted instructions. Reference the element context in your prompt (e.g., “Change the hero title to bigger size”).
4. Click `Send`:
   * The system processes your requests and returns changes in a new version.
   * If results differ from your expectation, review the page and adjust your prompt or use `Quick Edit`.
   <Frame>
     <img alt="Select to Edit with Prompt" />
   </Frame>

### 3. Quick Edit (Edit Content in Preview)

> Use this when you want to directly modify content on the page and review changes as discrete items.

**Steps**

1. Toggle `Select to Edit`
2. Select element
3. Use direct editing and the `Edit Bar`:
   * Text: click into text elements (header, paragraph, span, label, link, button) and type; press `Enter` to comfirm the changes.
   <Frame>
     <img />
   </Frame>
   * Link: click `Add/Edit Link` in the `Edit Bar`, update href, `Save`.
   * Image: `Upload & Replace Image` via the `Edit Bar`. Optional: Remove Background, Regenerate Background, Generate Video.
   <Frame>
     <img />
   </Frame>
   * Structural actions: `Select Parent`, `Undo` last change, `Delete element`.
4. Review the `Quick Edit` list:
   * Each change creates or updates a single line item, to record what exactly you have changed.
   * **Limit: up to 5 changes at once**.
   <Frame>
     <img />
   </Frame>
5. Manage pending edits:
   * `Delete` a single item: removes the entry and reverts its change in Preview.
   * `Discard` (close) the list: confirm to clear all pending edits and restore the page.
   * `Undo`: revert the most recent `Quick Edit`.
6. Send:
   * Click `Send` to submit these `Quick Edits` all at once; upon success, the system creates a new version.

### 4. Prompt in Place

Prompt in Place lets you edit with AI without leaving Preview. Turn on Select to Edit, click the element you want to change, type a prompt directly in the toolbar, and send it instantly. Your request is automatically added to the queue, so you can keep moving through the page without breaking your flow.

<video />

### 5. Go to Code

> Quickly locate the selected layer in the code editor for easy editing.

1. Select the target element, and click the `Go to Code` button in the toolbar.

<Frame>
  <img />
</Frame>

2. The editor will automatically switch to the `Code` tab, opening the file and highlighting the exact line where the element is defined.
3. The code editor lets you freely adjust content, styles, and layout to your needs.
4. **Don’t forget to `Save` after you’ve made all your code changes!**

<Frame>
  <img />
</Frame>

## Usage Limits and Out-of-Scope Cases

* `Quick Edit` list capacity: Up to 5 items per `Quick Edit` batch.
* Manual typing in Chat and `Quick Edit` cannot be used simultaneously. In order to allow multi-location edits at once and accelerate modification speed, you cannot send a prompt and `Quick Edit` todos in parallel.
  * Manual typing in Chat is disabled while `Quick Edit` occupies the input field.
  * Starting to type in Chat will hide the Preview `Edit Bar` and the `Quick Edit` List.
* Navigating away clears in‑progress `Quick Edits`
  * Navigating to other Readdy settings pages, switching projects, changing pages within a project, or switching to a different version of the current project will cause the current `Quick Edit` list input to be lost. This is because you have exited the editing context.

## Tips and Best Practices

* Choose the workflow that fits the task:
  * Use `Select to Edit` for natural-language, multi-step or contextual instructions in Chat.
  * Use `Quick Edit` for precise, immediate changes you can visually confirm.
* Keep edits atomic and clear; shorter batches reduce conflicts and make review easier.
* For images, prepare correct formats and sizes; invalid files will be rejected.

## Troubleshooting & FAQs

1. I selected an element but don’t see the Edit Bar.
   * A: Ensure `Select to Edit`is active; if you started typing in Chat, Edit Bar hides by design. Move focus away from Chat or stop typing to resume `Quick Edit`.
2. I can’t type in Chat while `Quick Edit` is open.
   * A: The Quick Edit list occupies the input; send the changes in `Quick Edit` or discard all the changes if you need to type in Chat.
3. My `Quick Edit` list hit the limit.
   * A: You can have up to 5 items per batch; please send, delete, or discard items before adding more. This limit helps ensure more accurate AI modifications and prevents potential bugs during page edits and modifications.
4. The AI result differs from my local `Quick Edit` preview.
   * A: Review the new version. If it doesn’t match expectations, adjust and resend.
5. Upload failed for an image.
   * A: Check file size and format. Unsupported files are blocked for security and consistency.

## Need Help?

If this guide doesn’t resolve your issue, contact us at [hi@readdy.ai](mailto:hi@readdy.ai) or use the live chat in the top‑right corner of Readdy. We’re here to help!


# SEO Advanced Configuration
Source: https://docs.readdy.ai/features/seo

Optimize how your site appears in search engines to increase visibility and traffic

With the SEO configuration feature, you can easily optimize how your website appears in search engines, improving visibility and organic traffic. Whether you are an e‑commerce seller, content creator, or enterprise site operator, SEO configuration helps you manage and enhance your site's search performance.

### Feature Highlights

* **Quickly improve search information**: Configure page titles, descriptions, and keywords to enhance indexing effectiveness.
* **Intelligent SEO generation**: Supports AI‑assisted optimization to improve content quality with low effort.
* **Google search preview**: See how your webpage appears in search results in real time.
* **Technical SEO files**: Preview core files like `sitemap.xml` and `robots.txt` to strengthen foundational SEO.

<Info>
  New to SEO? This guide walks you step‑by‑step from start to finish.
</Info>

***

## How to Use the SEO Configuration Feature

### 1. Access the Configuration Page

Click the "SEO Configuration" button in the top navigation bar of the website editor to open the configuration panel.

<Frame>
  <img />
</Frame>

### 2. Choose a Configuration Method (First‑time Use)

When using for the first time, choose one of the following methods to get started:

<div>
  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>AI Auto‑generation</em></div>
  </div>

  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>AI Auto‑generation</em></div>
  </div>

  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Manual configuration then optimization</em></div>
  </div>
</div>

* **AI auto‑generation**: The system automatically optimizes page SEO information. Best for quick setup.
* **Manual configuration then optimization**: Manually fill page information and then let the system assist with optimization. Best if you have specific content requirements.

After configuring Meta information for each page (switch through routes as needed), click **Generate** in the bottom‑right corner.

<Frame>
  <img />
</Frame>

<Warning>
  This guide appears only on first use; subsequent access goes directly to the configuration page.
</Warning>

***

### 3. Configure Meta Data (Page Basic Information)

In the configuration panel, you can set the following for each page:

| Settings                        | Notes                                                                |
| ------------------------------- | -------------------------------------------------------------------- |
| Title                           | The page title shown in search results. Keep it concise and clear.   |
| Description                     | A brief summary that encourages clicks.                              |
| Keywords                        | Page‑related keywords to improve search relevance.                   |
| Indexable                       | Controls whether this page can be indexed by search engines.         |
| Favicon                         | The small icon shown in browser tabs.                                |
| Structured Data (Schema Markup) | Preview only. If not generated, click the one‑click generate button. |

<Tip>
  Provide a suitable title and description for every page to improve overall SEO effectiveness.
</Tip>

***

### 4. Preview Technical SEO Files

You can also check whether your site has generated the following files:

<Frame>
  <img />
</Frame>

* **sitemap.xml**: Helps search engines crawl your website structure.
* **robots.txt**: Defines crawling rules for search engines.

<Warning>
  If not generated, click the one‑click generate button to create them.
</Warning>

***

### 5. Complete Configuration and Generate SEO Content

<Frame>
  <img />
</Frame>

* After finishing configuration, click **Generate** in the bottom‑right corner. The system will automatically organize and optimize your SEO settings.
* Upon success, your website will have more comprehensive search optimization information.

***

### 6. Tips

<Tip>
  <ul>
    <li><strong>Fill titles and descriptions for every page</strong>: Improves overall SEO performance and CTR.</li>
    <li><strong>Version‑specific configurations</strong>: Each website version corresponds to an independent set of SEO configuration content.</li>
    <li><strong>Regenerate after page changes</strong>: If you add or delete pages, re‑enter the SEO configuration page, generate again, and then republish the domain to ensure search engines recognize the latest structure.</li>
  </ul>

  <Info>
    <li>Before you publish your domain, Readdy generates a placeholder domain and `<lastmod>` for you.</li>
    <li>After publication, Readdy updates the domain in your `sitemap.xml` and `robots.txt` to your own, and sets the `<lastmod>` to your publication timestamp.</li>
  </Info>
</Tip>

***

### 7. FAQs

<Accordion title="Why can't I see the latest title/description in search results?">
  Search engines update with a delay. After generating SEO and publishing, they need time to recrawl and update. You can submit your sitemap to speed up indexing.
</Accordion>

<Accordion title="What if Technical SEO hasn't been generated?">
  First confirm your content is complete. If it's still missing, click the one‑click generate button. You can preview results in the panel after generation.
</Accordion>

***

## How to Get Your Site Indexed by Google

#### What is Google Search Engine Indexing?

Google search engine indexing refers to the process where Google's crawler programs discover, analyze, and add your website content to Google's search database. Once your site is indexed, users can find your website through Google searches. This is a crucial step for improving website visibility and gaining organic traffic.

#### Steps to Follow

1. **Access Google Search Console**
   First, you need to access Google Search Console and log in with your Google account.

   <Frame>
     <img />
   </Frame>

2. **Select the "URL prefix" connection method.**
   After entering the interface, select the "URL prefix" connection method.

   * What is URL Prefix?
     URL Prefix is a verification method that allows you to verify all pages under a specific URL prefix. For example, if you verify `https://yourdomain.com`, all sub-pages under that domain will be included.

   <Frame>
     <img />
   </Frame>

3. **Enter your website address**
   Enter your website address in the input field, then click the "Continue" button.

   <Frame>
     <img />
   </Frame>

4. **Select the HTML tag verification method**
   Select the HTML tag verification method to confirm website ownership.

   <Frame>
     <img />
   </Frame>

4.1 **Copy Verification Code**

<div>
  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Copy verification code</em></div>
  </div>

  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Send code to Readdy for embedding</em></div>
  </div>
</div>

* Copy the HTML verification code provided by Google
* Return to the Readdy platform
* Paste the code into the "Embed Code" section
* Enter the necessary content: "Please insert this code between <head /> tags" in the input field
* Send the information to Readdy

4.2 **Republish Website**

<div>
  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Code embedded</em></div>
  </div>

  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Verify after republishing domain</em></div>
  </div>
</div>

* Readdy will help you generate a new version of your website, This version includes Google's site verification code.
* You need to republish your domain for the changes to take effect
* Return to Google Search Console to complete the verification

4.3 **Complete the verification**

<div>
  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Verification successful</em></div>
  </div>

  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Indexing initiated</em></div>
  </div>
</div>

After successful verification, your site has been successfully indexed by Google! Your website can now appear in Google search results.

#### Important Notes

<Tip>
  <ul>
    <li>The verification process may take several minutes.</li>
    <li>Ensure your website content is of good quality to help improve search rankings.</li>
    <li>Regularly check Google Search Console to monitor your website's performance.</li>
  </ul>
</Tip>

***

## How to Get Your Site Indexed by Bing

#### What is Bing Search Engine Indexing?

Bing search engine indexing refers to the process where Microsoft Bing's crawler programs discover, analyze, and add your website content to Bing's search database. Once your site is indexed by Bing, users can find your website through Bing searches. As the world's second-largest search engine, Bing indexing can bring additional traffic and exposure opportunities to your website.

#### Steps to Follow

1. **Connect to Bing Webmaster Tools**
   First, you need to access Bing Webmaster Tools (`https://www.bing.com/webmasters`) and log in with your Microsoft account.

   <Frame>
     <img />
   </Frame>

2. **Add Your Website**
   After logging in, select 'Add property manually' for your website.

   * Why Choose Manual Addition?
     Manually adding your website gives you full control over the verification process, ensuring proper configuration and optimal search engine optimization results.

   <Frame>
     <img />
   </Frame>

3. **Enter Website Address**
   Enter your complete website address (including `https://` or `http://`) in the input field, then click the "Add" button.

   <Frame>
     <img />
   </Frame>

4. **Select Verification Method**
   Bing offers multiple verification methods. We recommend selecting the "HTML Meta Tag" method for verification.

   <Frame>
     <img />
   </Frame>

4.1 **Copy Verification Code**

<div>
  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Select HTML Meta Tag</em></div>
  </div>

  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Copy verification code</em></div>
  </div>

  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Send code to Readdy for embedding</em></div>
  </div>
</div>

* Select the "HTML Meta Tag" verification option
* Copy the meta tag code provided by Bing
* Return to the Readdy platform
* Paste the code into the "Embed Code" section
* Enter the necessary content: "Please insert this code between <head /> tags" in the input field
* Send the information to Readdy

4.2 **Republish Website**

<div>
  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Code embedded</em></div>
  </div>

  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Verify after republishing domain</em></div>
  </div>
</div>

* Readdy will help you generate a new website version containing the verification code
* You need to republish your domain for the changes to take effect
* Wait for the website update to complete (usually takes a few minutes)

4.3 **Complete Verification**

<div>
  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Verification successful</em></div>
  </div>

  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Indexing initiated</em></div>
  </div>
</div>

* Return to Bing Webmaster Tools
* Click the "Verify" button to complete verification
* After successful verification, your site has been successfully submitted to Bing for indexing
* Bing will begin crawling and indexing your website content

#### Important Notes

<Tip>
  <ul>
    <li>Optimize website loading speed and mobile experience, as these factors affect Bing rankings.</li>
    <li>Utilize various features in Bing Webmaster Tools to optimize your SEO strategy.</li>
  </ul>
</Tip>

***

## How to Get Your Site Indexed by Naver

#### What is Naver Search Engine Indexing?

Naver Search Engine Indexing refers to the process where Naver's crawler discovers, verifies, and registers your website so it can appear in Naver search results. Similar to Google Search Console, Naver Search Advisor lets you submit your site, verify ownership, and manage how pages are crawled and indexed. Proper indexing is essential for reaching audiences in South Korea where Naver is a leading search platform.

#### Steps to Follow

1. **Connect to Naver Search Advisor**\
   Access [Naver Search Advisor](https://searchadvisor.naver.com) and log in with your Naver account. After logging in, click “웹마스터 도구 사용하기” (“Use Webmaster Tools”).

   <Frame>
     <img />
   </Frame>

2. **Enter Website Address**\
   Input your full website URL (including `https://` or `http://`) and press Enter.

   <Frame>
     <img />
   </Frame>

3. **Select Verification Method**\
   Naver provides multiple verification methods. We recommend choosing the "HTML Meta Tag" method for verification.

3.1 ***HTML Meta Tag Verification Steps***

<div>
  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Select HTML Meta Tag and copy verification code</em></div>
  </div>

  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Send code to Readdy for embedding</em></div>
  </div>
</div>

* Select the HTML Meta Tag verification option
* Copy the meta tag code provided by Naver
* Return to the Readdy platform
* Paste the code into the “Embed Code” section
* In the placement dropdown, choose “Append to the `<head>` tag” (or type the same instruction if it is a text field)
* Send the information to Readdy

3.2 ***Republish Website***

<div>
  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Code embedded</em></div>
  </div>

  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Verify after republishing domain</em></div>
  </div>
</div>

* Readdy generates a new version of your website containing the verification meta tag
* Republish your domain so the verification code takes effect
* Wait a few minutes for the site update to complete

3.3 ***Complete Verification***

<div>
  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Indexing initiated</em></div>
  </div>

  <div>
    <Frame>
      <img />
    </Frame>

    <div><em>Verification successful</em></div>
  </div>
</div>

* Return to Naver Search Advisor
* Click "소유확인" ("Verify ownership") to complete verification
* Once successful, your site is submitted to Naver for indexing
* Naver begins crawling and indexing your site content

#### Important Notes

<Tip>
  <ul>
    <li>Ensure `robots.txt` allows Naver’s crawler (Yeti) to access your site.</li>
    <li>Optimize loading speed and mobile experience; both influence Naver rankings.</li>
    <li>Provide at least some Korean-language pages or translations; Naver prioritizes Korean content.</li>
    <li>Use Naver Search Advisor reports to monitor crawling, indexing, and technical issues.</li>
  </ul>
</Tip>

***

## Need Help?

If this guide doesn't resolve your issue, contact us at [hi@readdy.ai](mailto:hi@readdy.ai) or use the live chat in the top‑right corner of Readdy. We're here to help!


# Shop
Source: https://docs.readdy.ai/features/shop

Build your e-commerce business from scratch with Shop

## What is "Shop"?

Shop is a newly launched e-commerce solution by Readdy that allows you to quickly build a fully functional online store without any technical expertise. From product management to payment processing, from order tracking to inventory management, Shop provides all the tools you need to build your e-commerce business.

<Tip>
  **With Shop, you can:**

  * Add and upload product information directly in the admin panel—no longer need to rely on AI-driven frontend updates, safer and more efficient
  * Batch import product data via Shopify CSV files for easy bulk operations
  * Easily manage product status and inventory with one-click publish/unpublish
  * Add custom product attributes with high flexibility
  * View real-time order data with centralized management, no need to switch between platforms
</Tip>

Let's complete your first e-commerce website setup through four simple steps.

***

## Step 1: Create Your Shop Webpages

Based on your business needs, use Readdy AI in the Editor page to build the basic website pages. A complete e-commerce website typically includes:

* **Homepage** - Showcase your brand, featured products, marketing campaigns, etc.
* **Product List Page** - Display a complete list of all available products
* **Product Detail Page** - Display detailed information for individual products
* **Shopping Cart Page** - Users add and manage items to purchase
* **Checkout Page** - Enter customer information, shipping address, etc. before placing order
* **Payment Success Page** - Callback page after successful order placement
* **Login/Register Page** - Unless your site supports guest checkout, you'll need an account login feature
* **Orders Page** - Display all order records for logged-in users

<Tip>
  **Tips for Generating Pages**

  * Use **concise and clear** language to describe the page layout and features you want to AI, for example: "Create a product list page that displays all products with features including: search, pagination, sort by price, and add to cart button for each product"
  * Describe only **one** page requirement at a time, don't ask AI to generate multiple pages at once—staying focused is the foundation of successful task completion
</Tip>

***

## Step 2: Upload and Manage Your Products

After completing the main website pages, go to **Shop → Products** page where you can add and manage products to sell on your website.

<Frame>
  <img />
</Frame>

<br />

<Frame>
  <img />
</Frame>

### Adding Products

You can add products in the following ways:

* **Add Product** - Manually fill in product information one by one
* **Import** - Batch import product data, supports Shopify CSV files

<Frame>
  <img />
</Frame>

<Tip>
  After adding products, go to the Editor page and tell AI you've added new products so AI can dynamically display all products from the database on the website. Theoretically, this operation only needs to be done once, and subsequent product updates will be read dynamically.
</Tip>

### 💡 Product Management Tips

These tips can help you better manage your products:

<AccordionGroup>
  <Accordion title="Product Variants — SKUs">
    If your product has multiple specifications (such as size, color, material, etc.), you can use the **product variants** feature.

    <Frame>
      <img />
    </Frame>

    After creating multiple product variants, you can set the **Pricing Mode** to decide whether all variants share the same price and inventory configuration, or set independent prices and inventory for each variant.

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>
  </Accordion>

  <Accordion title="Custom Fields">
    In addition to basic product information, you can use **Custom Fields** to add custom fields to your products.

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>

    Based on your actual business situation, set various special business attributes for your products, such as:

    * Whether a 7-day refund is supported
    * Whether free shipping is available
    * Custom promotional activity tags for products
    * Set purchase quantity limit per order
    * Mark products as seasonal or limited edition
    * ...

    <Frame>
      <img />
    </Frame>

    <Tip>
      **Important**

      Note that after creating Custom Fields, you need to tell AI about the custom fields you created and clearly describe how you want to use these fields.

      **A very useful magic spell:**<br />
      I have added the custom fields **xxx** to the product table in the database. Please display **xxx** information in **xxx** page based on these fields.

      **For example:**<br />
      I have added the custom fields "support 7-day refund" and "free shipping" to the product table in the database. Please display the corresponding service information for each product in the details page based on these fields.
    </Tip>
  </Accordion>

  <Accordion title="Manage Columns">
    On the Products list page, you can customize the columns displayed in the table and hide unimportant information to make the product list clearer and easier to read.

    <Frame>
      <img />
    </Frame>

    Of course, not only preset product attributes, but custom fields can also be shown or hidden.

    <Frame>
      <img />
    </Frame>
  </Accordion>

  <Accordion title="Product Status">
    You can control product display status through the product's **Status** field:

    * **Active** - Products that are currently available for sale
    * **Draft** - Draft status, not displayed publicly
    * **Discontinued** - Discontinued (whether to continue displaying depends on your business model)

    <Tip>
      If you want to display only Active products on your website, you can tell AI in the Editor page: "Only display products with Status as Active, do not display products with Status as Draft and Discontinued."
    </Tip>

    <Frame>
      <img />
    </Frame>
  </Accordion>
</AccordionGroup>

***

## Step 3: Set Up Online Payment

We recommend using Stripe to complete payment integration.

### Connect Stripe

1. In the Editor page, click the **Connects** button at the top
2. Find **Stripe** in the Connects panel and click **Connect**
3. Follow the prompts to enter your Stripe API Key ([How to get Stripe API Key?](/integrations/stripe))

### Configure Payment Flow

After connecting your Stripe API Key, describe your payment requirements to AI, for example:

> "Use Stripe payment when checking out, and redirect to payment success page after payment is completed"

### Test Payment Function

<Warning>
  **Important Note:** Stripe does not allow direct redirection to Stripe payment links from within an iframe preview window.

  Please use the **share link** to open your Readdy website (or use your domain after publishing), then try purchasing a product to test whether you can successfully complete payment through Stripe.
</Warning>

***

## Step 4: View and Manage Orders

After completing the previous step, you can view all order data on the **Shop → Orders** page.

### Order Management

You can see all order records on the Orders list page (including real payment orders and test data).

* **Real Payment Orders**: Real orders created after connecting Stripe, payment status can be dynamically retrieved from Stripe (such as Paid, Canceled, Refunded, etc.).
* **Test Orders**: Orders created before connecting Stripe are virtual orders, mainly used for testing. Their order details do not include Stripe's Payment ID, and Status will remain at Pending Payment. You can delete these test order data as needed to keep the order list clean.

<Frame>
  <img />
</Frame>

### Refunds or Other Order Operations

If you need to process order refunds or other order-related operations, you can use the **Payment ID** and **Checkout Session ID** in the order details to find the corresponding order on Stripe and process refunds directly on the Stripe platform.

<Frame>
  <img />
</Frame>

### Logistics Management

Currently, Readdy has not yet integrated third-party logistics services. If you need to manage order logistics status (such as shipping, delivery, etc.), you can manually add tracking numbers and shipping details at the bottom of the order details page.

> Logistics management is in our future plans. In the near future, we will support dynamically displaying order logistics status directly on Readdy. Stay tuned!

<Frame>
  <img />
</Frame>

***

## Congratulations!

Through these four simple steps, you have built a complete online e-commerce website from scratch.

Once your website is live, users can browse products and make purchases through your website, and you can view order data in real-time and manage product inventory in the Readdy backend.

Finally, publish your website and start your e-commerce business! [How to publish your website?](/features/publish-react-v2)

***

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# AI SEO Analysis
Source: https://docs.readdy.ai/features/site-diagnosis

AI-powered website health checker that analyzes SEO, performance, security, accessibility, and user experience issues

AI SEO Analysis is an AI-powered website health checker that helps you identify and resolve issues across five critical categories: SEO, Performance, Security, Content, and Health.

With AI SEO Analysis, you can:

* **Save Time**: Automatically detect common website issues in seconds
* **AI-Driven Insights**: Get personalized solutions and actionable recommendations
* **Build Trust**: Ensure your website is healthy, secure, and user-friendly
  <Warning>
    AI SEO Analysis is available to paid users only. [Upgrade to the Pro
    plan](https://readdy.ai/user/subscription) to access this feature.
  </Warning>

## Why Use AI SEO Analysis

Publishing a website is just the beginning. To attract and retain visitors, your site needs to be fast, secure, accessible, and easy to find on search engines. AI SEO Analysis helps you:

* **Improve Search Rankings**: Identify and fix SEO issues that may be hurting your visibility
* **Enhance User Experience**: Discover performance bottlenecks and design problems
* **Protect Visitor Data**: Find security vulnerabilities before they become problems
* **Reach More Users**: Ensure your site is accessible to everyone, including those with disabilities

## Getting Started

<Steps>
  <Step title="Navigate to AI SEO Analysis">
    From your project dashboard, click on **AI SEO Analysis** in the left navigation panel, then click **Start Diagnosis** to begin.

    <Info>
      Make sure your website is published before running a diagnosis.
    </Info>

    <Frame>
      <img alt="AI SEO Analysis navigation entry" />
    </Frame>
  </Step>

  <Step title="Analyzing Your Website">
    Readdy will analyze your website for 10-30 seconds, checking for issues across all five categories: **SEO**, **Performance**, **Security**, **Content**, and **Health**.

    <Frame>
      <img alt="Diagnosing website" />
    </Frame>
  </Step>

  <Step title="Review Diagnosis Results">
    Once complete, you'll see a comprehensive health score and detailed breakdown of any issues found. You can switch between the five dimension tabs to view specific issues in each category.

    <Frame>
      <img alt="Site diagnosis results dashboard" />
    </Frame>
  </Step>

  <Step title="Try to Fix">
    Click the **Try to Fix** button next to any issue you want to resolve. The system will automatically navigate to the editor page with the fix request ready—just click send to proceed.

    <Frame>
      <img alt="Try to Fix button" />
    </Frame>
  </Step>

  <Step title="Confirm and Continue">
    Once AI optimization is complete, click **AI SEO Analysis** in the left navigation panel to return to the diagnosis results page and continue fixing the next issue.

    <Frame>
      <img alt="AI fixing suggestions in editor" />
    </Frame>
  </Step>
</Steps>

## Understanding Diagnosis Results

### Health Score

Your overall health score provides a quick snapshot of your website's condition. A higher score indicates fewer critical issues.

### Issue Categories

Issues are organized into five categories, each with severity indicators:

<AccordionGroup>
  <Accordion title="1. SEO">
    Checks for:

    * Missing or duplicate meta tags
    * Title tag issues
    * Structured data problems
    * Open Graph and Twitter Card metadata
  </Accordion>

  <Accordion title="2. Performance">
    Analyzes: - **Core Web Vitals**: - **LCP (Largest Contentful Paint)**:
    Measures loading performance - **FID (First Input Delay)**: Measures
    interactivity - **CLS (Cumulative Layout Shift)**: Measures visual stability -
    Page load times - Resource optimization opportunities
  </Accordion>

  <Accordion title="3. Security">
    Identifies: - SSL/HTTPS configuration issues - Mixed content warnings (HTTP
    resources on HTTPS pages) - Security headers
  </Accordion>

  <Accordion title="4. Content">
    Tests for: - ARIA labels and roles - Color contrast ratios - Semantic HTML
    structure - Keyboard navigation support
  </Accordion>

  <Accordion title="5. Health">
    Examines:

    * Mobile responsiveness
    * Navigation structure
    * Broken links and 404 errors
    * Layout and design consistency
  </Accordion>
</AccordionGroup>

## Collaboration Mode

AI SEO Analysis supports team collaboration, allowing multiple team members to review and fix issues together.

### Team Roles & Permissions

In collaborative projects where the owner has upgraded to the Pro plan, both **Owner** and **Editor** roles can perform AI SEO Analysis on the website.

<Info>**Viewers** do not have access to the AI SEO Analysis feature.</Info>

## Best Practices

* **Run Diagnoses Regularly**: Re-diagnose your published website after making updates
* **Prioritize Critical Issues**: Address critical and high-severity issues first

<Frame>
  <img alt="High priority issues example - prioritize critical issues first" />
</Frame>

* **Consider User Impact**: Focus on issues that directly affect your visitors' experience

## Notes

<Info>
  * Diagnosis scans typically take 10-30 seconds depending on website size and
    complexity - Results are based on the state of your website at the time of
    scanning - Some performance metrics may vary based on visitor location and
    network conditions
</Info>

***

## Need More Help?

If you need assistance with AI SEO Analysis, our support team is here to help:

* Email: [hi@readdy.ai](mailto:hi@readdy.ai)
* Feedback: [https://readdy.ai/feedback](https://readdy.ai/feedback)


# AI Social Posts
Source: https://docs.readdy.ai/features/social-media

Plan, schedule, and track a week of social media posts from your website

AI Social Posts helps you keep your business visible on social media without writing every post manually. Readdy reads your website, suggests weekly topics, drafts posts for Facebook, Instagram, X, and LinkedIn, and lines them up at recommended times.

With AI Social Posts, you can:

* **Plan a full week with AI**: Generate 5 topic ideas and turn them into a week of ready-to-review posts
* **Use AI-recommended publish times**: Line up posts at suggested times throughout the week
* **Publish to 4 platforms in one click**: Automatically publish platform-ready captions and images to Facebook, Instagram, X, and LinkedIn
* **Track post performance after publishing**: Review delivery, impressions, likes, comments, and website visitors in Sent

## How It Works

<Steps>
  <Step title="Open AI Social Posts">
    From the left sidebar, click **AI Social Posts**.

    If you see the setup screen, click **"Generate weekly plan"**. If you already have posts, you will land in **Upcoming**, where you can review this week's drafts and scheduled posts.

    <Frame>
      <img alt="AI Social Posts setup screen" />
    </Frame>
  </Step>

  <Step title="Review Weekly Topics">
    Readdy's AI Planner suggests 5 topics for the selected week.

    You can:

    * Click **"Refresh all topics"** to replace the full set
    * Regenerate a single topic
    * Optionally edit a topic before generating posts
    * Click **"Generate posts"** when the topics look right

    <Frame>
      <img alt="AI Social Posts weekly topic ideas" />
    </Frame>
  </Step>

  <Step title="Manage Connected Accounts">
    Open **Manage Accounts** from the social accounts area to connect or disconnect platforms.

    If the project has no connected social platforms yet, connect at least one platform before viewing the generated weekly posts.

    <Frame>
      <img alt="AI Social Posts connected accounts entry" />
    </Frame>

    <Frame>
      <img alt="AI Social Posts manage social accounts" />
    </Frame>

    * **Supported platforms**: Facebook, Instagram, X, and LinkedIn
    * **Who can manage accounts**: Project **Owners** and **Editors** can connect, disconnect, publish, schedule, and retry. **Viewers** can only view available post content.
    * **Expired connections**: If a token expires, the account shows as needing reconnect. Reconnect it before publishing or retrying that platform.
    * **Disconnecting**: Removing an account revokes Readdy's posting access for that platform. You can reconnect later.
  </Step>

  <Step title="Generate the Week's Posts">
    Readdy creates captions, images, and recommended publish times for the week.

    Each topic becomes one post card in **Upcoming**. A card can include versions for Facebook, Instagram, X, and LinkedIn, depending on which accounts are connected and which platform content is available.

    <Frame>
      <img alt="AI Social Posts upcoming generated posts" />
    </Frame>
  </Step>

  <Step title="Review and Schedule in Upcoming">
    **Upcoming** is your planning workspace for future posts.

    Open any draft to edit:

    * Caption text
    * Image
    * Publish date and time
    * Platform-specific content

    To refine generated content, enter a short instruction and click **"Regenerate"**. For captions, you can ask Readdy to change the tone, add details, or translate the copy. For images, you can regenerate with a new visual direction or upload your own image.

    <div>
      <div>
        <Frame>
          <img alt="AI Social Posts regenerate caption" />
        </Frame>
      </div>

      <div>
        <Frame>
          <img alt="AI Social Posts regenerate or upload image" />
        </Frame>
      </div>
    </div>

    When a draft is ready, click **"Schedule post"** in the edit window. To confirm all remaining drafts for the week, use **"Schedule all"**.

    If you want to send a post immediately, use **"Publish now"**.

    <div>
      <div>
        <Frame>
          <img alt="AI Social Posts edit post window" />
        </Frame>
      </div>

      <div>
        <Frame>
          <img alt="AI Social Posts schedule picker" />
        </Frame>
      </div>
    </div>
  </Step>

  <Step title="Track Results in Sent">
    **Sent** shows posts that have been published, are being delivered, or have already reached their scheduled publish time.

    For each platform, you can see delivery status such as **Pending**, **Published**, or **Failed**. If a platform fails, use **"Edit & Retry"** or **"Reconnect & Retry"** to fix the issue and publish again.

    <Frame>
      <img alt="AI Social Posts sent delivery results" />
    </Frame>
  </Step>
</Steps>

## Platform Specifications

Captions are tailored for each platform and follow platform limits.

| Platform  | Character Limit   |
| --------- | ----------------- |
| Facebook  | 63,206 characters |
| Instagram | 2,200 characters  |
| X         | 280 characters    |
| LinkedIn  | 3,000 characters  |

Images should use a platform-supported ratio. If an uploaded image ratio is unsupported, Readdy will ask you to choose another image.

## Delivery Statuses

Readdy tracks delivery per platform.

| Status        | Meaning                                                                                       |
| ------------- | --------------------------------------------------------------------------------------------- |
| **Pending**   | Readdy has started or queued the delivery, but the final platform result is not available yet |
| **Published** | The platform accepted and published the post                                                  |
| **Failed**    | The platform rejected the post or the account needs attention                                 |

<Info>
  Post captions and images must follow each platform's content and community guidelines. Posts that violate platform rules may fail to publish.
</Info>

A post can be partially successful. For example, Facebook and LinkedIn can publish while Instagram fails. In that case, Sent keeps the successful platforms and lets you retry only the failed one.

## Sent Metrics

Sent cards show delivery and performance metrics for each platform row.

| Metric       | Meaning                                                                   |
| ------------ | ------------------------------------------------------------------------- |
| **Delivery** | Whether that platform is still pending, published successfully, or failed |
| **Impr.**    | Impressions reported for the post on that social platform                 |
| **Likes**    | Likes or reactions reported by the platform                               |
| **CMT**      | Comments reported by the platform                                         |
| **Visitors** | Website visitors Readdy can attribute to that post and platform           |

<Info>
  **Visitors** measures traffic back to your published website from the social post. It is different from platform impressions, likes, comments, or total website traffic. Visitor tracking requires **Web analytics** to be enabled in **Project Settings**; if it is turned off, Readdy cannot collect this data.
</Info>

Metrics may take time to update after a post is published. A value can stay at **0** if the platform has not returned engagement data yet, no one has clicked through to your site, or the post was published without a trackable link.

## FAQ

<AccordionGroup>
  <Accordion title="Will drafts publish automatically?">
    No. Drafts do not go live until you confirm them. Use **"Schedule post"**, **"Schedule all"**, or **"Publish now"** when you are ready.
  </Accordion>

  <Accordion title="Can I publish immediately instead of scheduling?">
    Yes. Use **"Publish now"** from a post card or the edit window to send the post immediately.
  </Accordion>

  <Accordion title="Can I use my own images?">
    Yes. In the edit window, you can upload an image or choose an image from your project files, as long as the image ratio is supported.
  </Accordion>

  <Accordion title="What happens if one platform fails?">
    Sent shows delivery results per platform. Successful platforms stay published, and failed platforms can be retried after you fix the issue.
  </Accordion>

  <Accordion title="Why is a post still marked Pending?">
    Pending means Readdy is waiting for the final platform result. Refresh Sent later, or wait for the delivery status to update.
  </Accordion>

  <Accordion title="What does Readdy do with my social account?">
    When you connect an account, Readdy receives a standard OAuth token that lets it post on your behalf to the platform you connected. Readdy only uses it for posts you choose to publish or schedule. You can disconnect at any time from **Manage Accounts**.
  </Accordion>

  <Accordion title="Why can't I see publishing controls?">
    If you are collaborating on a project as a **Viewer**, you can view generated posts but cannot publish, schedule, retry, regenerate, or manage accounts. Ask the project owner to change your role to **Editor** or **Owner**.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# White Label
Source: https://docs.readdy.ai/features/white-label

Deliver Readdy to clients under your own brand with custom branding, white-label domains, and branded emails

White Label helps agencies turn Readdy into an AI-powered growth engine for their own brand. It lets you deliver the full client-facing experience under your own identity, with branded login, dashboard URLs, published site domains, and outgoing white-label emails.

<Info>
  White Label is available on **Agency Pro** plans and above. If your current subscription does not include White Label, editing stays locked until you upgrade to a plan that supports White Label.
</Info>

<Columns>
  <Frame>
    <img alt="Custom Branding page showing the brand name, website title, logo upload, favicon upload, and login preview" />
  </Frame>

  <Frame>
    <img alt="Finished white-label sign-in page with a custom logo, brand name, and client login form" />
  </Frame>
</Columns>

## What White Label lets you customize

| Setting             | What clients see                                                                          | Value for agencies                                                              |
| ------------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
| **Custom Branding** | The brand name, logo, favicon, and browser tab title shown on the login and project pages | Present a consistent agency brand across the client login and editor experience |
| **Platform Domain** | The URL clients use to sign in and access their dashboard or editor                       | Move client access from a Readdy URL to your own domain                         |
| **Site Domain**     | The subdomain pattern used for client-published websites                                  | Publish client sites under a branded domain structure                           |
| **Custom Email**    | The sender domain, sender name, and subject line used for white-label emails              | Send invitations and notifications from your own branded email identity         |

## Before you start

Before you configure White Label, make sure you have:

* A plan that includes White Label
* Access to the DNS provider for every domain you want to use
* A platform subdomain such as `app.example.com` or `editor.example.com`
* A site subdomain such as `sites.example.com` if you want client-published sites on your own domain
* A verified Resend account and sending domain if you want branded email delivery
* A test client email address so you can validate the full white-label flow before going live

## Recommended setup order

1. Prepare your brand assets and domains, then go to **Workspace → White Label** to start setup.

   <Frame>
     <img alt="White Label workspace page showing the Custom Branding tab inside the Readdy sidebar layout" />
   </Frame>

2. Configure **Custom Branding**, including your brand name, browser tab title, logo, and favicon.

   <Frame>
     <img alt="Custom Branding page showing an empty brand name field, website title, logo upload, favicon upload, and login preview" />
   </Frame>

3. Configure **Platform Domain** and confirm the final client login URL.

   <Frame>
     <img alt="Platform Domain section showing the current domain with Edit and the Connect custom domain row" />
   </Frame>

4. Configure **Site Domain** and choose how it should apply to existing published sites.

   <Frame>
     <img alt="Custom Domain page showing the Site Domain section with the current default domain, Settings, and Connect options" />
   </Frame>

5. Configure **Custom Email**, confirm the email address, sender name, and subject, then send a test message.

   <Frame>
     <img alt="Custom Email page showing the sender settings and email preview tabs" />
   </Frame>

6. Use Readdy to build each client's website.

7. In **Workspace**, add your clients and assign the corresponding website to each client.

   <Columns>
     <Frame>
       <div>
         <img alt="Sites & Permissions page showing assigned sites and client permission settings" />
       </div>
     </Frame>

     <Frame>
       <div>
         <img alt="Clients page showing the client list and assigned projects in the workspace" />
       </div>
     </Frame>
   </Columns>

8. In each client's **Access** settings, send the invitation they will use to sign in to their dashboard.

   <Frame>
     <img alt="Client Access page showing the login URL, invitation email field, and resend invitation action" />
   </Frame>

## Custom Branding

Use **Custom Branding** to control the visual identity clients see across the white-label experience.

<Frame>
  <img alt="Custom Branding page showing the brand name, website title, logo upload, favicon upload, and login preview" />
</Frame>

<Steps>
  <Step title="Set your Brand Name">
    Enter the brand name you want clients to recognize. This appears on the login page. After you configure it, you can preview the result in the preview area on the right.

    <Frame>
      <img alt="Brand Name field filled with KIKI Studio" />
    </Frame>
  </Step>

  <Step title="Set the Website Title">
    Enter the title shown in browser tabs. When users hover over the browser tab, they can see the corresponding tab title. You can also hover over the tab in the preview area on the right to preview how it will appear.

    <Frame>
      <img alt="Custom Branding page showing the Website Title field filled with dashboard" />
    </Frame>
  </Step>

  <Step title="Upload your Logo and Favicon">
    Upload the logo used on the login page, project pages, emails, and other branded touchpoints. Upload a favicon so clients can recognize your platform in the browser tab.

    <Frame>
      <img alt="Custom Branding page showing the uploaded logo and favicon" />
    </Frame>
  </Step>

  <Step title="Review the preview">
    Use the built-in preview to check both the **Login Page** and **Editor Page** before you finish.

    <Frame>
      <img alt="Preview area showing the branded login page inside Custom Branding" />
    </Frame>
  </Step>
</Steps>

<Tip>
  **Branding asset requirements:** Logo files support `PNG`, `JPG`, and `SVG`, up to 2 MB. Favicon files support `PNG`, `JPEG`, and `ICO`, up to 500 KB.
</Tip>

## Custom Domain

<Frame>
  <img alt="Custom Domain page showing the Platform Domain and Site Domain sections" />
</Frame>

### Platform Domain

Use **Platform Domain** when you want clients to sign in and work from your own branded URL.

<Steps>
  <Step title="Choose whether to keep the default subdomain or connect your own domain">
    You can either edit the default Readdy subdomain slug, or click **Connect** in the **Connect custom domain** section to move client access to your own domain.

    <Frame>
      <img alt="Platform Domain section showing the current domain with Edit and the Connect custom domain row" />
    </Frame>
  </Step>

  <Step title="Enter a platform subdomain">
    Use a subdomain such as `app.example.com` or `editor.example.com`. Root domains such as `example.com` are not supported for platform login.

    <Frame>
      <img alt="Platform Domain setup with a custom domain field and a warning to share the new login URL with clients" />
    </Frame>
  </Step>

  <Step title="Add the CNAME record">
    Copy the generated CNAME record into your DNS provider and save the record there.

    <Frame>
      <img alt="Platform Domain setup showing the CNAME record to add in DNS" />
    </Frame>
  </Step>

  <Step title="Verify the domain">
    Return to Readdy and click **Verify**. If the DNS record is correct but SSL is still being issued, the action changes to **Check Status** until the domain becomes active.

    <Frame>
      <img alt="Platform Domain verification step showing the Verify action after DNS checks" />
    </Frame>
  </Step>
</Steps>

<Warning>
  Changing a live Platform Domain immediately invalidates the previous login URL. Share the new URL with your team and clients before or at the same time you switch it.
</Warning>

### Site Domain

Use **Site Domain** when you want client-published sites to live under your own branded domain pattern.

<Steps>
  <Step title="Decide whether to keep the default pattern or connect your own site domain">
    You can use Readdy's default de-branded site domain, which uses a randomly generated prefix, or configure your own branded base subdomain for client-published websites.

    <Frame>
      <img alt="Site Domain settings showing the default generated subdomain, the Settings action, and the Connect custom domain section" />
    </Frame>
  </Step>

  <Step title="Enter the site domain">
    Enter a base subdomain such as `sites.example.com`. You do not need to type `*.` yourself. Readdy uses it as a wildcard for published client sites.

    <Frame>
      <img alt="Site Domain setup showing the Enter Domain step with a wildcard subdomain entered" />
    </Frame>
  </Step>

  <Step title="Add the wildcard CNAME record">
    Copy the generated wildcard DNS record and save it in your DNS provider.

    <Frame>
      <img alt="Site Domain setup showing DNS records added successfully and the default domain scope options" />
    </Frame>
  </Step>

  <Step title="Choose how the domain should apply">
    Decide whether the new site domain should apply only to future publishes or to all published sites. Review this carefully before you save the new default domain scope.

    <Frame>
      <img alt="Default Domain Scope dialog showing options for new publishes only or all published sites" />
    </Frame>
  </Step>

  <Step title="Verify the domain">
    Click **Verify** after the wildcard DNS record is in place. If the CNAME is correct but SSL is still pending, return later and use **Check Status** until the domain becomes active.

    <Frame>
      <img alt="Site Domain verification step showing completed DNS checks and a Verify button" />
    </Frame>
  </Step>
</Steps>

<Accordion title="How Site Domain choices affect existing published sites">
  Use **New publishes only** if you want existing published sites to keep their current domains.

  When you first connect a custom Site Domain and apply it to **all published sites**, the previous site URLs redirect to the new address.

  When you change from one custom Site Domain to another and apply it to **all published sites**, the old URLs stop working immediately.

  If you revert back to the default Site Domain pattern, live site URLs change again, so review the target pattern before you confirm.
</Accordion>

<Accordion title="How long domain verification can take">
  DNS propagation and SSL issuance usually complete within a few minutes, but in some cases they can take up to 72 hours. During that time, the domain may stay in a pending status even when the DNS record is already correct.
</Accordion>

## Custom Email

Use **Custom Email** to send white-label invitations and notifications from your own sender identity.

<Frame>
  <img alt="Custom Email page showing the sender settings and email preview tabs" />
</Frame>

<Steps>
  <Step title="Open brand email settings">
    In **Custom Email**, click **Settings** in the **Use Brand Email** section to open the branded sender setup.
  </Step>

  <Step title="Connect Resend">
    Add your Resend API key, choose a verified sending domain, then set the sender name and sender email prefix.
  </Step>

  <Step title="Send a test email">
    Complete the setup with a test email so you can confirm delivery before sending to clients.
  </Step>

  <Step title="Review template tabs">
    White Label includes templates for **Invitation**, **Verification Code**, **Form Submission**, **Appointment**, **Voice Appointment**, and **Form Receipt**.
  </Step>

  <Step title="Adjust sender details for each template">
    For each template, you can review the preview and adjust the sender name and subject line.

    <Frame>
      <img alt="Invitation email preview showing the sender name, subject line, and email content" />
    </Frame>
  </Step>
</Steps>

| Template              | Usually sent to           | Typical purpose                                                                                                                                                  |
| --------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Invitation**        | Client                    | Give a client access to review or log in to their site                                                                                                           |
| **Verification Code** | Client or user signing in | Complete login or verification flow                                                                                                                              |
| **Form Submission**   | Site owner                | Notify the owner about a new form lead                                                                                                                           |
| **Appointment**       | Site owner                | Notify the owner about a new booking<br />You can set a different recipient email address for each project in Project Settings.                                  |
| **Voice Appointment** | Site owner                | Notify the owner about a new voice appointment<br />You can set a different recipient email address for each project in Project Settings.                        |
| **Form Receipt**      | Form submitter or visitor | Confirm that a submission was received<br />You can configure a different receipt sender address for each project using the Resend settings in Project Settings. |

<Info>
  In the current White Label flow, **Custom Email** lets you configure branded sending and adjust the sender name and subject line for each template. The email body is shown as a preview and is not fully editable here.
</Info>

<Info>
  If you do not configure branded email delivery, white-label emails continue to use the default sender address.
</Info>

## Common issues

<Accordion title="Can I use White Label without moving published sites to my own domain">
  Yes. **Site Domain** is optional. Many agencies start with **Custom Branding** and **Platform Domain** first, then move published sites later.
</Accordion>

<Accordion title="Can I keep the default Readdy login domain but change the slug">
  Yes. If you are not ready to use your own Platform Domain yet, you can keep the default Readdy domain and customize the default subdomain slug.
</Accordion>

<Accordion title="Why is my Platform Domain rejected">
  Platform Domain only supports subdomains. Use something like `app.example.com` or `www.example.com`, not the root domain `example.com`.
</Accordion>

<Accordion title="What should I enter for Site Domain">
  Enter the base subdomain, such as `sites.example.com`. Readdy handles the wildcard setup for you, so published sites can use subdomains under it.
</Accordion>

<Accordion title="Will previously published site subdomains automatically switch to the default White Label site domain when I upgrade to a White Label plan?">
  No. By default, only newly published websites use the default White Label domain.

  If you want previously published websites to switch as well, go to **Site Domain** settings and change the application scope so the domain applies to all published sites. After the change, previously published domains redirect to the White Label domain.
</Accordion>

<Accordion title="What is the difference between the White Label site domain and the standard site domain?">
  The White Label site domain does not include Readdy branding. You can also connect your own branded domain for client-published websites, which helps strengthen and grow your agency brand.
</Accordion>

<Accordion title="Why does my domain stay in Pending or Check Status">
  Usually this means either DNS has not fully propagated yet or the SSL certificate is still being issued. Wait a little longer, then run the verification step again.
</Accordion>

<Accordion title="Why can't I use a domain or subdomain I entered">
  The domain may already be bound to another account, or the subdomain may already be taken. Use a different domain or remove the conflicting binding first.
</Accordion>

<Accordion title="What happens if I downgrade to a plan without White Label">
  Your saved white-label configuration is preserved, but editing stays locked until you upgrade back to a plan that includes White Label.
</Accordion>

<Accordion title="Do I need Custom Email to use White Label">
  No. You can still use **Custom Branding** and **Custom Domain** without branded email. If Custom Email is not configured, Readdy continues using the default sender for white-label emails.
</Accordion>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Workspace: Projects & Clients
Source: https://docs.readdy.ai/features/workspace

See all your websites in one place, group them under clients like folders, and get back to active work in fewer clicks

With Workspace, you can:

* **See everything**: View and manage all your websites (projects) in one place
* **Stay organized**: Group projects under clients like folders — by customer, brand, or however you work
* **Find fast**: Search, sort, and switch views to get back to active work in fewer clicks

## All Projects

All Projects shows every project you have access to.

<Frame>
  <img alt="All Projects overview" />
</Frame>

* Use **search** to find a project by name.
* Use **sort** (e.g. newest first or A–Z) to change the order.

<Frame>
  <img alt="Search and sort projects" />
</Frame>

* You can switch how the list is shown — for example a folder-style view that groups projects by client, or a flat list of all projects at once.

<Frame>
  <img alt="Switching between list views" />
</Frame>

## Clients

Clients help you group projects the way you group work — by customer or brand.

Think of a client as a **folder**: you give it a name (often a company or person), add contact details if you want, and link projects to that client. Projects can sit inside a client folder or stay uncategorized if you don't assign them.

<Frame>
  <img alt="Clients overview" />
</Frame>

### Why Use Clients?

* **Many projects** are easier to scan when they're grouped by client
* **Same customer, many sites** stay under one place
* **Quick access** from the sidebar to a client's projects, similar to opening a folder

### What You Can Do with Clients

* **Add and edit clients** — set business name, contact info, and notes.

<Frame>
  <img alt="Adding and editing a client" />
</Frame>

* **Link projects** to a client, move a project to another client, or back to uncategorized.

<Frame>
  <img alt="Linking projects to a client" />
</Frame>

* **Open a client** from the list or sidebar to see only that client's projects.

<Frame>
  <img alt="Viewing a client's projects" />
</Frame>

* **Remove a client** when you no longer need the folder — your projects are not deleted, they become uncategorized.

## Sidebar Navigation

* **New Website** — start a new project.
* **All Projects** — see everything. Client names appear as shortcuts underneath (like subfolders), so you can jump straight to a client's projects.
* **Clients** — open the full Clients list to manage customers and links.

<div>
  <Frame>
    <img alt="Sidebar navigation" />
  </Frame>
</div>

<Info>
  Only clients that contain projects appear in the sidebar. Empty clients are hidden there on purpose — you can still open and edit them anytime from the **Clients** page.
</Info>

## Tips

1. **Start simple** — use Clients when you feel the flat list is getting hard to scan.
2. **One project, one client** — link each project to the client it belongs to so filters and folders stay accurate.
3. **Uncategorized is fine** — not every project needs to be in a client folder.

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!

Thank you for using Readdy — and best of luck with your website launch!


# Build Your First Website
Source: https://docs.readdy.ai/firstapp

Complete step-by-step guide to creating, customizing, and publishing your first website with Readdy's AI-powered tools

## Project Setup

Initialize and configure your new website project

<Accordion title="Create New Project">
  **Getting Started**: Begin your website building journey with these simple steps:

  1. Sign in to your <a href="https://readdy.ai/home">Readdy dashboard</a>
  2. Click **"Create New Project"** button
  3. Enter your project name.

  <Frame>
    <img />
  </Frame>

  <Note>
    We recommend using the default React Next.js project type for the best results.
  </Note>

  This is your first step to building a website with Readdy's AI-powered platform.
</Accordion>

## Content Generation

Create your website content using AI-powered tools

<Accordion title="Text Prompts">
  Create your website using detailed natural language descriptions.

  **When to use**: Perfect for starting from scratch when you have a clear idea of what you want but no visual references.

  **How to prompt effectively**:

  * Be specific about your industry and target audience
  * Include style preferences, colors, and layout requirements
  * Mention required sections and functionality

  **Example prompts**:

  * "Create a modern law firm website with services, about us, and contact pages"
  * "Build a creative portfolio for a graphic designer with project galleries"
  * "Design a SaaS landing page for a project management tool"

  The more detailed your description, the better Readdy can understand and create your vision.
</Accordion>

<Accordion title="Templates">
  Start with professional pre-designed templates for faster development.

  **When to use**: When you want to save time and start with a proven design structure that you can customize.

  **Template Process**:

  1. Browse available templates in your project type
  2. Select one that matches your vision
  3. Customize the template according to your specific needs

  Templates provide a solid foundation that you can customize to match your brand and requirements.
</Accordion>

<Accordion title="Reference Images">
  Upload visual inspiration to guide your website design.

  **When to use**: When you have screenshots, designs, or layouts that capture the style you want for your website.

  **Image Reference Process**:

  1. Upload reference images (websites, designs, layouts you like)
  2. Describe what you like about each image
  3. Specify adaptations you want for your project
  4. Readdy creates a design inspired by your references

  Works great for capturing specific visual styles, color schemes, or layout ideas from existing designs.
</Accordion>

<Accordion title="Reference Websites">
  Use existing websites as inspiration for functionality and design.

  **When to use**: When you find a website with the exact functionality, layout, or style you want to recreate.

  **Website Reference Process**:

  1. Submit website URLs you want to use as inspiration
  2. Explain specific elements you want to incorporate
  3. Describe your unique requirements and differences
  4. Get a design that captures the essence while being uniquely yours

  Perfect for replicating proven website structures and user experiences in your own brand style.
</Accordion>

<Accordion title="Visual Descriptions">
  Describe your ideal website design in detail without visual references.

  **When to use**: When you have a clear vision in mind but no reference materials to share.

  **Description Categories**:

  * **Layout preferences**: Header styles, navigation types, footer designs
  * **Color schemes**: Primary and secondary colors, mood preferences
  * **Typography**: Font styles, formal vs. casual tone
  * **Imagery**: Photo styles, illustration preferences

  This method works well when you have a clear vision but no reference materials.

  📖 **Learn More**: <a href="/tricks/prompting-tips#visual-style">Visual Style Guide</a> for specific style descriptions and examples
</Accordion>

## Page Editing

Customize and refine your website design to match your exact vision

<Accordion title="Edit Page">
  Modify any element on your website using Readdy's Selector Mode system.

  **When to use**: After generating your initial website content, use these tools to fine-tune specific elements like text, images, and layouts.

  **Text Editing Features**:
  Click text elements and edit content directly.Most basic text changes don't consume credits

  **Image Editing Features**:

  * **Image Replacement**: Upload new images to replace existing ones (free)
  * **Background Removal**: Remove image backgrounds for transparent effects (10 credits)
  * **AI Background Generation**: Create new backgrounds using AI prompts (50 credits)

  <Tip>
    You can also select an element first, then send commands like "make the selected text larger" or "change this button color to blue" for more precise control.
  </Tip>

  📖 **Learn More**: <a href="/features/edit-tool">Edit Tool</a> documentation
</Accordion>

<Accordion title="Add Effects & Animations">
  Enhance your website with professional visual effects and interactions.

  **When to use**: After completing your basic design, add effects to make your website more engaging and interactive.

  **Available Effects**:

  * **Animations**: Smooth transitions and movements
  * **Interactive Elements**: Hover effects and click animations
  * **Video Backgrounds**: Transform static images into dynamic videos (150 credits)
  * **Visual Enhancements**: Shadows, gradients, and modern effects

  **Implementation Methods**:

  * Use Selector Mode to select elements, then describe desired effects
  * Send natural language commands: "add hover animation to this button"
  * For complex animations, plan in chat mode before implementation

  <Tip>
    Start with subtle effects and build up. Too many animations can overwhelm users and slow down your website.
  </Tip>

  📖 **Learn More**: <a href="/features/generate-video">Video Generation</a> | <a href="/tricks/prompting-tips#micro-interactions">Micro-interactions</a>
</Accordion>

<Accordion title="Multi-Page Websites">
  Expand your website with additional pages and comprehensive navigation.

  **When to use**: After creating your homepage, add additional pages like About, Services, Contact, or Blog pages to build a complete website.

  **Page Generation Methods**:

  * **AI Conversation**: Describe new page requirements through chat
  * **Click-to-Generate**: Click links targeting non-existent pages and describe requirements
  * **404 Recovery**: Use chat to describe missing page content when encountering 404 errors

  Multi-page generation helps you build comprehensive websites systematically for better organization and user experience.

  📖 **Learn More**: <a href="/features/multiple-pages">Multiple Pages</a> documentation
</Accordion>

<Accordion title="Version Control">
  Manage your project versions and recover from unwanted changes.

  **When to use**: When you need to undo problematic changes or revert to a previous working version of your website.

  **Version Management**:

  * Delete problematic versions through the right-side chat panel
  * Only the last conversation can be deleted at a time
  * System automatically reverts to the previous working version
  * Multiple versions must be deleted one by one

  <Warning>
    Version deletion cannot be undone. Confirm the version is truly problematic before deleting.
  </Warning>
</Accordion>

## Backend Features

Transform your static website into a dynamic application with backend functionality

<Accordion title="Form Data Collection">
  Capture user input and build your first interactive feature.

  **When to use**: After creating your basic website pages, add forms to collect user information like contact details, feedback.

  **Quick Setup**:

  1. Click any form element in Selector mode or use the form submission button
  2. Configure data storage - create new forms or use existing ones
  3. Test form submissions in preview and view collected data

  **What you get**: Organized data collection, Excel export capabilities, and email notifications for new submissions.

  📖 **Learn More**: <a href="/features/form#feature-access">Setup Guide</a> | <a href="/features/form#storage-configuration">Storage Configuration</a>
</Accordion>

<Accordion title="Connect Supabase">
  Add a powerful backend database to store and manage your application data.

  **When to use**: When your project needs user accounts, dynamic content, or data that changes over time (like user profiles, posts, or inventory).

  **What is Supabase**: A complete backend platform providing database, authentication, file storage, and custom functions - all with a generous free tier.

  **Connection Process**:

  1. Click Supabase integration in top navigation or when prompted by AI
  2. Sign in to Supabase (or create free account) and authorize Readdy
  3. Select or create a Supabase project for your website

  **Integration Benefits**: Real-time data sync, automatic API generation, and enterprise-grade infrastructure without coding.

  📖 **Learn More**: <a href="/integrations/supabase#authorization">Authorization Process</a> | <a href="/integrations/supabase#building-with-supabase">Building with Supabase</a>
</Accordion>

<Accordion title="User Authentication">
  Enable user accounts and personalized experiences.

  **When to use**: When you want users to create accounts, save preferences, or access protected content (member areas, user dashboards, personalized content).

  **Available Methods**:

  * Email/password registration and login
  * Social logins (Google, Twitter, Apple)

  **Simple Implementation**: Just describe what you need:

  ```
  Add login and registration functionality using Supabase authentication system
  ```

  **Results**: Automatic generation of login/registration pages, user management, and protected page access.

  Essential for community sites, membership platforms, or any personalized user experience.

  📖 **Learn More**: <a href="/integrations/supabase#user-login">Email/Password Auth</a> | <a href="/integrations/supabase#third-party-login">Third-Party Login</a>
</Accordion>

<Accordion title="Database Operations">
  Store and manage dynamic content and user data.

  **When to use**: After adding authentication, or when you need to save and display changing information (user posts, product catalogs, dynamic content).

  **What you can build**:

  * User profiles and settings
  * Content management (blogs, portfolios)
  * Product catalogs with categories
  * Comment systems and user interactions

  **How it works**: Describe your data needs in conversation, and Readdy automatically creates database tables, relationships, and secure access policies.

  **Example requests**:

  ```
  Create a user profile page where users can edit their information
  ```

  <Warning>
    All database operations include automatic security policies. Review these in Supabase before launching your website.
  </Warning>

  Perfect for content-driven websites and applications requiring structured data storage.

  📖 **Learn More**: <a href="/integrations/supabase#database">Database Operations</a>
</Accordion>

<Accordion title="Edge Functions">
  Add custom backend logic and external service integrations.

  **When to use**: When you need server-side processing, AI integrations, email sending, or complex business logic that can't run in the browser.

  **Common Applications**:

  * AI chatbots and content generation
  * Email notifications and messaging
  * Data processing and calculations
  * Third-party API integrations

  **Implementation**: Describe your backend needs, and Readdy creates and deploys serverless functions automatically.

  **Example requests**:

  ```
  Add an AI chatbot that answers questions about my products
  ```

  <Warning>
    Store API keys securely in Supabase Edge Functions > Secrets. Never share sensitive keys in conversations.
  </Warning>

  Ideal for adding advanced functionality that requires server-side processing.

  📖 **Learn More**: <a href="/integrations/supabase#edge-functions">Edge Functions</a>
</Accordion>

<Accordion title="File Storage">
  Handle user uploads and media management.

  **When to use**: When users need to upload files like profile pictures, documents, portfolios, or when your site requires image galleries.

  **Storage Features**:

  * 1GB free storage through Supabase
  * Support for images, documents, and videos
  * Automatic image optimization and resizing
  * Secure file access controls

  **Implementation**: Request file upload functionality through conversation:

  ```
  Add user avatar upload with automatic image resizing
  ```

  Perfect for user-generated content, portfolios, and document sharing features.

  📖 **Learn More**: <a href="/integrations/supabase#file-storage">File Storage</a>
</Accordion>

## Launch Website

Publish your completed website and optimize it for the world to discover

<Accordion title="Publish Project">
  Make your website accessible to everyone on the internet.

  **When to use**: After completing your website design, adding all necessary functionality, and testing everything works properly.

  **Pre-launch Preparation**:

  * Ensure all pages have unique, descriptive names
  * Test all forms, links, and interactive features
  * Review content for accuracy and completeness
  * Check mobile responsiveness across different devices

  **Publishing Process**:

  1. Click the **Publish** button in your project's top navigation
  2. Enter your custom domain name (must be purchased separately)
  3. Configure DNS records with your domain provider
  4. Wait for DNS propagation and go live

  **Domain Requirements**: You'll need to purchase a domain from providers like GoDaddy, Namecheap, or Cloudflare. Each domain can only be connected to one website.

  **What happens next**: Your website becomes accessible worldwide at your custom domain, with automatic SSL certificates and global CDN distribution.

  📖 **Learn More**: <a href="/features/publish#2-bind-a-custom-domain">Domain Binding</a> | <a href="/features/publish#3-configure-dns-records">DNS Configuration</a>
</Accordion>

<Accordion title="SEO Optimization">
  Optimize your website for search engines and social media sharing.

  **When to use**: Before or immediately after publishing to ensure your website appears professionally in search results and social media shares.

  **Essential SEO Elements**:

  * **Website Title**: The main title shown in browser tabs and search results
  * **Meta Description**: Brief summary that appears under your title in search results (150-160 characters)
  * **Favicon**: Small icon displayed in browser tabs for brand recognition

  **Quick Configuration**: Use the template approach by describing your needs:

  ```
  1. Use the attached image as the website icon
  2. Replace the website title and description with:
  <Title>Your website title</Title>
  <MetaDescription>Your website Description</MetaDescription>
  Only replace the specified content accordingly.
  ```

  📖 **Learn More**: <a href="/features/seo">SEO Configuration</a>
</Accordion>

<br />

🎉 **Congratulations!** You've just learned how to build a complete website from start to finish. We're here to support your creative journey every step of the way! 🌟


# AI Model Integration
Source: https://docs.readdy.ai/integrations/ai-model

Integrate custom AI models and services with Readdy



# Integrate with Calendly
Source: https://docs.readdy.ai/integrations/calendly

Add Calendly scheduling functionality to your Readdy website for appointment booking and meeting management

Calendly is an online scheduling tool that lets people book meetings with you based on your availability, eliminating the back-and-forth of finding a time.
It provides an online appointment calendar that allows your clients to conveniently schedule meetings directly through the website generated by Readdy.

## Where can I find my Calendly Scheduling Link?

<Steps>
  <Step title="Step 1: Create a New Event">
    Go to Calendly and click the **Event Types** menu to create a new event.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 2: Set Up Event Type">
    Choose an event type that fits your needs (e.g., select "One-on-One") and complete the setup, then save your changes.

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 3: Copy Event Link">
    After setup, a card for your new event will be generated. Click **Copy Link** to copy the event URL. Go back to Readdy, paste the link into the input field, and click the button to let AI generate a new version that includes the Calendly event.

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 4: Test the Integration">
    It's recommended to test the booking experience to ensure the Calendly component works correctly. You can check the booking results on the Contacts page in Calendly.

    <Frame>
      <img />
    </Frame>
  </Step>
</Steps>


# How to export design to Figma / MasterGo
Source: https://docs.readdy.ai/integrations/figma

Export your Readdy website designs to Figma and other design tools to continue editing in your preferred design environment

<Info>
  Export Current Page State to Figma Canvas (What you currently see) — including any interactive or dynamically changed content — directly into design tools.
</Info>

## Export Process

<Frame>
  <img />
</Frame>

Click the **Export** Button. Then:

### For Figma

<Frame>
  <iframe title="YouTube video player" />
</Frame>

<Steps>
  <Step title="Install the Figma Plugin">
    Make sure you have the Readdy Figma plugin installed in your Figma workspace. You can find it here: [Readdy Figma Plugin](https://www.figma.com/community/plugin/1485938516254474618/readdy)
  </Step>

  <Step title="Paste in the Figma Plugin">
    Open the Readdy plugin in Figma and paste the copied design data directly into the plugin interface.
  </Step>
</Steps>

### For MasterGo

**Paste in the Canvas**\
Simply paste the copied design data directly onto your canvas using Ctrl+V (or Cmd+V on Mac).

## FAQ

<Accordion title="Why my design only have one page or status after export?">
  Export Current Page State to Figma Canvas (What you currently see in your eyes) — including any interactive or dynamically changed content — directly into Figma.

  1. Trigger the state of the page to the state you want to export, such as when a pop-up appears or when the second tab is selected.
  2. Click the **Export** Button
  3. Click **Copy**
  4. Paste

  Now, the exact UI state as seen on the page can be exported into Figma.
</Accordion>

<Accordion title="Why can't export the whole interactions or prototype to Figma / MasterGo?">
  Because their canvas is static canvas, they can't play the prototype or interactions.
</Accordion>


# Integrate with Google Analytics
Source: https://docs.readdy.ai/integrations/ga

Set up Google Analytics tracking on your Readdy website to monitor visitor behavior, traffic sources, and performance metrics

## If you're new to Google Analytics (GA)

<Steps>
  <Step title="Step 1: Start Setup">
    Go to the [Google Analytics platform](https://analytics.google.com) and click **"Start measuring"** to begin setup.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 2: Configure Account">
    Follow the setup steps to configure your GA account.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 3: Select Platform">
    When you reach "Data Collection", select **"Web"** as your platform type.

    <Info>
      Note: Readdy currently only supports website projects.
    </Info>

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 4: Set Up Data Stream">
    Enter your **published domain** and give your Data Stream a name. Then click **"Create and Continue"**.

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 5: Connect to Readdy">
    A popup will appear with your Google tag. Copy the code and paste it into the input field in Readdy. Click **"Connect"** to generate a new version. Don't forget to re-publish your domain afterwards.

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 6: Test Connection">
    Back in GA, click **"Test installation"** to check if the connection is working.

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 7: View Reports">
    Once connected, GA will start collecting user data from your site. You can view reports under the **"Reports"** tab later.

    <Frame>
      <img />
    </Frame>
  </Step>
</Steps>

## If you already have a Data Stream in GA

<Steps>
  <Step title="Step 1: Access Admin Panel">
    Log into GA, go to your property's **Admin panel**.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 2: Navigate to Data Streams">
    Under **Property Settings** > **Data collection and modification**, select **"Data Streams"**.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 3: Choose Data Stream">
    **If you already have a Web Data Stream**, select it.

    <Frame>
      <img />
    </Frame>

    **If no existing Data Stream is available**, click **"Web"** to create one. Follow the steps from Step 4 to Step 6 in the "New to GA" section.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 4: Access Google Tag">
    In the Google tag section, click **"View tag instructions"**.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 5: Get the Code">
    Switch to the **"Install manually"** tab and copy the Google code.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 6: Connect to Readdy">
    Go back to Readdy, paste the code into the input field, and click **"Connect"**. A new version connected to GA will be created.

    <Warning>
      Remember to re-publish your site so GA can start tracking your user data.

      <Frame>
        <img />
      </Frame>
    </Warning>
  </Step>
</Steps>

## After Integration

### Viewing Your Analytics Data

<Tip>
  Once connected, Google Analytics will start collecting user data from your site. You can view comprehensive reports under the **"Reports"** tab in your GA dashboard.
</Tip>

### What You Can Track

* **Real-time visitors**: See who's on your site right now
* **Page views**: Most and least popular pages
* **User demographics**: Age, location, and interests
* **Traffic sources**: Search engines, social media, direct visits
* **User behavior**: How visitors navigate through your site

## Troubleshooting

<Accordion title="Analytics Not Working?">
  **Common solutions:**

  1. **Check if you republished**: Analytics won't work until you republish your site after connecting
  2. **Verify the code**: Make sure you copied the complete Google tag code
  3. **Wait for data**: It can take 24-48 hours for data to appear in GA
  4. **Test installation**: Use the "Test installation" feature in Google Analytics
  5. **Check domain**: Ensure your domain is correctly published and accessible

  If issues persist, contact our support team for assistance.
</Accordion>

<Accordion title="Multiple Websites Setup">
  If you have multiple websites, you can:

  1. **Create separate data streams** for each domain in the same GA property
  2. **Use different GA properties** for completely separate tracking
  3. **Set up cross-domain tracking** if the sites are related

  Choose the approach that best fits your analytics needs.
</Accordion>


# Integrate with GitHub
Source: https://docs.readdy.ai/integrations/github

Connect your Readdy project with a GitHub repository for version control and two-way code synchronization

## GitHub Overview

### What is GitHub?

[GitHub](https://github.com) is the world's leading platform for version control and code collaboration. By connecting your GitHub account to Readdy, you can establish a seamless code sync workflow between Readdy's AI-powered website builder and your local development environment.

### What can you do after integrating GitHub with Readdy?

* **Push** — Push your Readdy project code to a GitHub repository at any time
* **Pull** — Pull the latest code from GitHub to create a new version in Readdy
* **Clone** — Clone the repository to your local machine and develop with your favorite IDE

***

## Permissions

GitHub integration availability depends on your project role:

| Action                              | Owner | Editor | Viewer |
| ----------------------------------- | ----- | ------ | ------ |
| View GitHub entry and status        | ✅     | ✅      | ❌      |
| Connect / Disconnect GitHub         | ✅     | ❌      | ❌      |
| Push / Pull sync                    | ✅     | ❌      | ❌      |
| Error handling (re-authorize, etc.) | ✅     | ❌      | ❌      |

* **Owner** — Full GitHub integration permissions, including connecting, syncing, disconnecting, and error handling.
* **Editor** — Can only view GitHub connection status. Cannot perform any actions.
* **Viewer** — GitHub entry and connection status are hidden by default.

***

## Authorization

Connecting GitHub takes just a few steps. You'll need a GitHub account — if you don't have one, you can [sign up for free](https://github.com).

<Steps>
  <Step title="Open the GitHub Panel">
    You can open the GitHub panel in two ways:

    * Click the **Connects** button in the top navigation bar, then select **GitHub**.

    <Frame>
      <img alt="Connects button in the top navigation bar" />
    </Frame>

    <Frame>
      <img alt="GitHub in the Connects panel" />
    </Frame>

    * After connecting, click the **GitHub icon** in the top navigation bar for quick access.

    <Frame>
      <img alt="GitHub icon and dropdown menu in the top nav bar" />
    </Frame>
  </Step>

  <Step title="Authorize the Connection">
    1. In the GitHub panel, click the **"Connect GitHub"** button.

    <Frame>
      <img alt="GitHub panel before connection — showing the Connect GitHub button" />
    </Frame>

    2. A new browser window will open, redirecting you to the GitHub authorization page.
    3. Install the **Readdy GitHub App** on your GitHub account or organization. You can choose to grant access to all repositories or select specific ones.
    4. Once authorization is complete, the window will close automatically and the Readdy panel will update.

    During authorization, Readdy will display a "Connecting to GitHub…" waiting screen. Please complete the installation in the GitHub window and return to Readdy — the panel will automatically detect the successful connection.

    <Frame>
      <img alt="Connecting to GitHub… waiting screen" />
    </Frame>
  </Step>

  <Step title="Create a Repository">
    After authorization, Readdy will guide you to create a repository for the current project:

    1. Select a **GitHub Organization** (or personal account) from the dropdown.
    2. Click **"Create Repository"**.
    3. Readdy will automatically create a **private repository** and bind it to the project.

    <Frame>
      <img alt="Create Repository panel — select a GitHub Organization and click Create Repository" />
    </Frame>

    Once created, the panel will display the repository name, URL, and connection status. The repository is empty at this point — you need to manually click **Push** to upload your project code to GitHub.

    ### Adding a new GitHub Organization

    If the organization you need is not in the dropdown, click **"+ Add GitHub Organization"** to install the Readdy GitHub App on that organization.

    <Frame>
      <img alt="GitHub App installation page — select the organization to install" />
    </Frame>

    <Tip>
      If the organization has **already installed** the Readdy GitHub App, you will not see the installation page. Instead, you will be taken directly to the App settings page.

      The **"Save"** button is disabled by default. To activate it, toggle the **Repository access** option — for example, switch to **"Only select repositories"** and then back to **"All repositories"** — then click **"Save"** to complete the authorization.

      <Frame>
        <img alt="GitHub App settings — toggle Repository access to activate the Save button" />
      </Frame>
    </Tip>

    After completing the installation (or saving settings), return to Readdy. The new organization will now appear in the **GitHub Organization** dropdown.

    <Frame>
      <img alt="The newly added organization is now selectable in the dropdown" />
    </Frame>
  </Step>
</Steps>

***

## Code Sync

Code synchronization between Readdy and GitHub is **manually triggered** — it does not sync automatically. Each Push or Pull requires you to click the button and confirm the action. Only the project **Owner** can perform sync operations.

You can trigger Push and Pull from two places:

* The action buttons at the bottom of the **GitHub panel**
* The GitHub icon dropdown menu in the **top navigation bar**

A confirmation dialog will appear before each operation.

<Frame>
  <img alt="Connected GitHub panel with Push and Pull buttons at the bottom" />
</Frame>

### Push to GitHub

Push uploads the currently selected Readdy project version to the **main** branch of the connected GitHub repository.

After confirming the push:

1. The panel and toolbar will display a **"Pushing…"** status badge (e.g., `Pushing… · V12`).
2. A success notification will appear when the push is complete.
3. Push details — including the repository URL and commit SHA (before and after) — will be recorded in the version's message history.

<Columns>
  <Frame>
    <img alt="Pushing status badge in the panel and toolbar" />
  </Frame>

  <Frame>
    <img alt="Push completed — success notification with commit details" />
  </Frame>
</Columns>

<Warning>
  Push is an overwrite operation — it replaces the entire content of the main branch with your Readdy project code. Readdy records the previous commit SHA for rollback reference. If you need to revert, you can use this SHA to restore the previous state directly on GitHub.
</Warning>

### Pull from GitHub

Pull fetches the latest code from the **main** branch and creates a new version in Readdy.

After confirming the pull:

1. The panel will display a **"Pulling…"** status badge.
2. Once complete, Readdy will automatically create a **new version** and switch to it.
3. Pull details — including the repository URL and commit SHA — will be recorded in the message history.

<Frame>
  <img alt="Pull completed — new version created automatically" />
</Frame>

<Note>
  Pull creates a new version in your project. Before pulling, make sure the code on GitHub's main branch is what you want to sync into Readdy.
</Note>

### Sync Status

In collaborative scenarios, both Owner and Editor can see the current sync progress in real time in the GitHub panel and the top navigation bar icon. While a Push or Pull is in progress, sync buttons are temporarily disabled to prevent conflicts.

***

## Cloning the Repository

Once connected, the GitHub panel provides clone commands for local development. Three formats are supported:

| Method         | Example                                |
| -------------- | -------------------------------------- |
| **HTTPS**      | `https://github.com/org/repo-name.git` |
| **SSH**        | `git@github.com:org/repo-name.git`     |
| **GitHub CLI** | `gh repo clone org/repo-name`          |

Switch between tabs and click the **copy button** to copy the command to your clipboard.

<Frame>
  <img alt="Clone section with HTTPS, SSH, and GitHub CLI tabs" />
</Frame>

After cloning, you can edit the code locally with your preferred IDE, push changes to GitHub, then use **Pull** in Readdy to sync them back.

***

## Viewing Connection Details

Owner and Editor can view the following connection details in the GitHub panel:

* **Account** — The connected GitHub account name
* **Organization** — The organization (or account) that owns the repository
* **Repository** — The linked repository name and URL (click to open on GitHub)
* **Status badge** — A green "Connected" badge indicates a healthy connection

<Frame>
  <img alt="Full connected panel view showing Account, Organization, Repository, and Clone section" />
</Frame>

***

## Disconnecting

### Disconnect Repository

To unbind the current project from its GitHub repository:

1. In the GitHub panel, find the repository card and click **"Disconnect"**.
2. Confirm in the dialog that appears.

<Frame>
  <img alt="Disconnect confirmation dialog" />
</Frame>

After disconnecting:

* The GitHub repository **will not be deleted** — you can still access it on GitHub.
* If you reconnect GitHub later, a **new repository** will be created for this project. The previous repository will not be reused.

### Switch GitHub Account

Readdy does not currently support switching GitHub accounts from within the product. To switch to a different GitHub account:

1. Go to [github.com](https://github.com) in your browser, sign out of the current account, and sign in with the account you want to switch to.
2. Return to Readdy and start the GitHub connection flow — for example, click **"Connect GitHub"** — and complete authorization. The flow uses the GitHub account currently signed in in your browser, so Readdy updates the linked GitHub account to the one you switched to.

<Note>
  After switching accounts and reconnecting, Readdy will create a new repository for the project. The previous repository will not be deleted.
</Note>

***

## Troubleshooting

When a GitHub connection issue occurs, the panel will automatically display the corresponding error message and an action button. Below are all possible error scenarios and how to resolve them.

<AccordionGroup>
  <Accordion title="GitHub authorization expired">
    **Symptom:** The panel displays a "GitHub authorization has expired" message.

    **Cause:** Your GitHub OAuth authorization has been revoked — for example, the Readdy app was removed from **GitHub → Settings → Applications → Authorized OAuth Apps**.

    **How to fix:**

    1. Click **"Reconnect GitHub"** in the panel.
    2. You will be redirected to the GitHub authorization page.
    3. Complete the authorization.
    4. Your previously connected repository remains unchanged — no need to create a new one.
  </Accordion>

  <Accordion title="GitHub App removed">
    **What you'll see:** After the App is uninstalled on GitHub, use the steps below to reconnect your organization and repository.

    **Cause:** The Readdy GitHub App has been uninstalled from your GitHub account or organization.

    **What you can do when the app is removed (Owner):**

    * Select another organization and create a repository
    * Click **"+ Add GitHub Organization"** to open the GitHub App installation flow again
    * If you have no organizations available, the initial setup panel is shown
  </Accordion>

  <Accordion title="GitHub App suspended">
    **Symptom:** The panel displays a "GitHub App suspended" message.

    **Cause:** The Readdy GitHub App installation has been suspended on GitHub (via the "Suspend" action in the App's settings page).

    **How to fix:**

    1. Click **"Restore GitHub Access"** in the panel.
    2. You will be redirected to the GitHub App installation page.
    3. Select the affected organization and unsuspend (reactivate) the App in its settings.
  </Accordion>

  <Accordion title="Organization access blocked">
    **Symptom:** The panel displays an "organization access blocked" message.

    **Cause:** The GitHub organization's policies have changed — for example, SSO enforcement, Approved Apps restrictions, or you have been removed from the organization or lost the required permissions.

    **How to fix:**

    1. Click **"Reconnect GitHub"** in the panel.
    2. You will be redirected to the GitHub App installation page.
    3. Select the organization and complete the installation — this re-establishes both the App installation and OAuth authorization in one step.
    4. Return to Readdy, select the organization, and create a new repository.

    <Note>
      If your organization enforces SSO or restricts third-party app access, you may need an organization admin to approve the Readdy GitHub App before you can proceed.
    </Note>
  </Accordion>

  <Accordion title="Repository not found or access denied">
    **Symptom:** The panel displays a "repository not found" or "repository access denied" message.

    **Cause:** The connected GitHub repository has been deleted, or Readdy's access to the repository has been revoked (e.g., the App's repository permissions were changed).

    **How to fix:**

    1. Click **"Disconnect"** in the panel to unbind the current repository.
    2. You will be taken back to the Create Repository page.
    3. Select an authorized organization and create a new repository.
  </Accordion>

  <Accordion title="Push or Pull failed">
    **Possible causes:**

    * Unstable network connection
    * GitHub service temporarily unavailable
    * Authorization token has expired

    **How to fix:**

    1. Check your network connection.
    2. Click the **refresh button** (↻) in the panel header to reload the connection status.
    3. If authorization has expired, follow the steps in **"GitHub authorization expired"** above to reconnect.
    4. If the issue persists, wait a moment and try again.
  </Accordion>
</AccordionGroup>

***

## Best Practices

* **Push regularly** — After important version iterations, push to GitHub promptly to keep a backup.
* **Verify before pulling** — Pull creates a new version. Make sure the code on GitHub's `main` branch is what you expect before pulling.
* **Coordinate with collaborators** — Push/Pull status is broadcast in real time. Avoid triggering sync operations simultaneously with other team members.
* **Develop locally** — Clone the repository to your local machine, make changes with your preferred IDE and tools, push to GitHub, then Pull from Readdy to sync the updates back.

***

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Google Sign-In Integration
Source: https://docs.readdy.ai/integrations/google-login

Step-by-step guide to add Google Sign-In to your Readdy project using Supabase

## What you need before you start

**Accounts & project info**

1. A [**Google Cloud**](https://console.cloud.google.com) account (to create the OAuth app)
2. A [**Supabase**](https://supabase.com/) project (you can create a new one; the free tier is fine)
3. A **Readdy** project (to build and publish your site)
4. Before going live, prepare links to your **Privacy Policy** and **Terms of Service** to add to the Google consent screen.

## Create and configure OAuth in Google Cloud

**Goal:** Obtain the **Client ID** and **Client Secret**, allow sign-in from your site, and hand off the OAuth callback to **Supabase**.

<Steps>
  <Step title="Step 1: Create a Google Cloud Platform project">
    Open [**Google Cloud Console**](https://console.cloud.google.com) and sign in to your Google account.

    Click the project selector at the top → click **"New Project"** → enter a **Project name** → **Create**.

    <Frame>
      <img />
    </Frame>

    Enter a project name and click **Create**.

    <Frame>
      <img />
    </Frame>

    Enter a project name.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 2: Configure the OAuth consent screen">
    Click **Select project**.

    <Frame>
      <img />
    </Frame>

    Click your project name to select it.

    <Frame>
      <img />
    </Frame>

    Click the hamburger menu (top-left). Hover **APIs & Services**, then click **OAuth consent screen**.

    <Frame>
      <img />
    </Frame>

    Click **Branding**, then **Get started**.

    <Frame>
      <img />
    </Frame>

    Fill in: **App name**, **User support email**, **Audience**, **Contact information**, then click **Create**.

    <Frame>
      <img />
    </Frame>

    Add a **Logo**, your **domain**, and the **Authorized domains**.

    <Frame>
      <img />
    </Frame>

    Click **Add user** to add test users. When testing is complete, you can click **Publish app** to move to production.

    <Frame>
      <img />
    </Frame>

    Click **Data Access**, then **Add or remove scopes**.

    <Frame>
      <img />
    </Frame>

    Choose the scopes your app needs. In most cases, only **email**, **profile**, and **openid** are required. Select any others as needed.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 3: Create an OAuth client (Web application)">
    Click **Clients**, then **Create client**.

    <Frame>
      <img />
    </Frame>

    For **Application type**, choose **Web application**. Enter a **Name**, and add **Authorized redirect URIs**.

    <Frame>
      <img />
    </Frame>

    Click **Create**. Your OAuth client is created—save the **Client ID** and **Client secret**.

    <Frame>
      <img />
    </Frame>
  </Step>
</Steps>

### How to get the Authorized redirect URIs

<Steps>
  <Step title="Get Supabase Callback URL">
    Sign in to **Supabase** and create a project.

    In the left sidebar, click **Authentication**.

    <Frame>
      <img />
    </Frame>

    Click **Sign In / Providers**, then on the right click **Google**.

    <Frame>
      <img />
    </Frame>

    Copy the **Callback URL** and paste it into **Authorized redirect URIs** in Google Cloud.

    <Frame>
      <img />
    </Frame>
  </Step>
</Steps>

## Enable Google Sign-In in Supabase

<Steps>
  <Step title="Step 1: Access Supabase Dashboard">
    Open the [**Supabase Dashboard**](https://supabase.com/) and enter your project.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 2: Configure Google Provider">
    In the left sidebar, click **Authentication** → **Sign In / Providers**, then on the right click **Google**.

    <Frame>
      <img />
    </Frame>

    In **Client ID** / **Client Secret**, paste the values you copied from Google → click **Save**.

    <Frame>
      <img />
    </Frame>
  </Step>
</Steps>

## Connect Supabase inside Readdy

**Goal:** Link your Readdy project to your Supabase project and generate a page with Google Sign-In.

<Steps>
  <Step title="Step 1: Connect Supabase">
    Connect your Supabase project to Readdy. See "How to connect Supabase" in Readdy for detailed instructions.

    <Warning>
      Make sure you connect the **same Supabase project** where you enabled **Google Authentication**.
    </Warning>
  </Step>

  <Step title="Step 2: Generate login/registration UI">
    In Readdy, enter the following prompt:

    ```
    To make a login and registration function, need to connect to Google Login.
    ```

    This will generate the necessary UI components for Google Sign-In.
  </Step>

  <Step title="Step 3: Test the integration">
    In Readdy, click **Share Link** and open the site's login page → click **"Continue with Google"** → choose an account and authorize.

    After a successful login, you should be redirected back to the **SITE URL**.

    In **Supabase → Authentication → Users**, you should see the newly created user record.
  </Step>
</Steps>

## Troubleshooting

<Accordion title="Common Issues">
  **Issue:** "Error 400: redirect\_uri\_mismatch"

  * **Solution:** Make sure the callback URL in Google Cloud exactly matches the one in Supabase (including https/http and trailing slashes)

  **Issue:** "This app isn't verified"

  * **Solution:** This is normal during development. Click "Advanced" → "Go to \[app name] (unsafe)" to continue testing

  **Issue:** Users not appearing in Supabase

  * **Solution:** Check that you're using the same Supabase project in both the Google Cloud configuration and Readdy connection
</Accordion>

<Accordion title="Next Steps">
  Once Google Sign-In is working:

  1. **Add user profile management** - Allow users to update their profile information
  2. **Implement role-based access control** - Set up different user permissions
  3. **Set up email notifications** - Send welcome emails and notifications
  4. **Configure additional OAuth providers** - Add Facebook, Twitter, or other login options

  Choose the features that best fit your application's needs.
</Accordion>


# Integrate with Mailchimp
Source: https://docs.readdy.ai/integrations/mailchimp

Connect Mailchimp email marketing tools to your Readdy website for newsletter signups and campaign management

Mailchimp is an all-in-one marketing platform best known for its email marketing tools. It helps businesses design, send, and automate campaigns, manage contact lists, and track performance, all in one place.

## Where can I find my Mailchimp form code?

<Steps>
  <Step title="Step 1: Navigate to Forms">
    Log in to Mailchimp and go to the "Other forms" menu.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 2: Create New Form">
    Click the "Create new form" button.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 3: Select Form Type">
    Select the "Embedded form" type.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 4: Enter Form Name">
    Enter your form name.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 5: Continue to Builder">
    Click "Continue to builder".

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 6: Customize Form">
    Customize your form structure.

    <Frame>
      <video />
    </Frame>
  </Step>

  <Step title="Step 7: Finish Configuration">
    Once you're done configuring the form, click the "Continue" button.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 8: Copy Embed Code">
    Mailchimp will automatically generate the embed code for your form. Click "Copy Code" to copy it.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 9: Connect to Readdy">
    Go back to Readdy, paste the copied code into the Mailchimp configuration input field. Once the "Confirm" button is activated, click it to connect Mailchimp. Readdy will help you generate a new version.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 10: Test Integration">
    After the new version is generated, it's recommended to test it. You can go to the preview page and fill out the Mailchimp form. If it's successful, check the Audience page in Mailchimp to confirm that the data was collected.

    <Frame>
      <img />
    </Frame>
  </Step>
</Steps>


# PayPal
Source: https://docs.readdy.ai/integrations/paypal

Accept PayPal payments on your Readdy website in minutes with AI-powered integration

## How to Integrate PayPal Payment in Your Readdy Website

PayPal is a leading global payment platform supporting 200+ countries and regions, allowing customers to pay securely using their PayPal account or credit card.

**Quick Overview**

With Readdy AI, you can integrate PayPal payments in just a few simple steps:

| Step      | Action                      | Time             |
| --------- | --------------------------- | ---------------- |
| 1         | Connect Supabase            | 2 minutes        |
| 2         | Configure PayPal with AI    | 2 minutes        |
| 3         | Add credentials to Supabase | 3 minutes        |
| 4         | Add payment button          | 5 minutes        |
| 5         | Test payment                | 5 minutes        |
| **Total** |                             | **\~17 minutes** |

<Tip>
  **Quick Start Tips**

  For beginners:

  1. Start with a simple product (one-time payment)
  2. Test with a small real transaction (\$1-5)
  3. Add subscriptions or multiple products after confirming it works
</Tip>

***

## Prerequisites

**Before You Begin**

Ensure you have:

* [ ] **PayPal Account** - [Create free account](https://www.paypal.com/business) (Business account recommended for live payments)
* [ ] **Readdy Website Project** - Already created in Readdy
* [ ] **React or Next.js Project** - Only these project types are currently supported
* [ ] **Checkout Page or Product Cards** - Your website has product displays or checkout page

> **Why Choose PayPal?**
>
> * **Global Reach**: Accept payments from customers in 200+ countries
> * **Flexible Payment Options**: Customers can pay with credit/debit cards without a PayPal account
> * **Wide Accessibility**: Easy to use in Asia, Latin America, and other regions
> * **Boost Conversion**: Offer multiple payment options to increase sales by 15-30%

***

## Get PayPal API Credentials

<Steps>
  <Step title="Log in to PayPal Developer Dashboard">
    1. Visit [https://developer.paypal.com/dashboard/](https://developer.paypal.com/dashboard/)
    2. Sign in with your PayPal account

    <Tip>
      **Account Requirements**

      **You must sign in with a Business PayPal account** to accept real payments on your website. [Sign up for free](https://www.paypal.com/business).

      Personal PayPal accounts can only access the Sandbox test environment and cannot process live payments.
    </Tip>
  </Step>

  <Step title="Create REST API App">
    1. In the left menu, click **Apps & Credentials**
    2. Click the **Create App** button
    3. Enter an app name (e.g., "My Readdy Website")
    4. Click **Create App**
  </Step>

  <Step title="Copy Your API Credentials">
    You'll see your app details.

    **Copy and save the following**:

    * ✅ **Client ID**
    * ✅ **Client Secret** - Click **Show** button to reveal

    <Frame>
      <img alt="" />
    </Frame>
  </Step>
</Steps>

***

## Integration Steps

### 1. Connect Supabase

PayPal integration requires Supabase for secure credential storage and backend support.

Follow the [Supabase integration guide](/integrations/supabase) to connect your project.

***

### 2. Configure PayPal with AI

Tell AI to configure PayPal for you:

```
Help me set up PayPal payment on my website.
Client ID: YourClientID
Secret: YourSecret
```

AI will automatically:

* ✅ Configure PayPal integration
* ✅ Set up secure credential storage
* ✅ Handle all backend setup

<Frame>
  <img alt="" />
</Frame>

***

### 3. Add PayPal Credentials to Supabase

After AI configures the integration, you need to manually add your PayPal credentials to Supabase:

1. Log in to [Supabase Dashboard](https://supabase.com/dashboard)
2. Select your project
3. Go to **Edge Functions** → **Secrets**
4. Click **Add New Secret** and add the following three secrets:

   * **Name**: `PAYPAL_CLIENT_ID`
     **Value**: Your PayPal Client ID

   * **Name**: `PAYPAL_SECRET`
     **Value**: Your PayPal Client Secret

   * **Name**: `PAYPAL_MODE`
     **Value**: `sandbox` (for testing) or `live` (for production)

<Frame>
  <img alt="" />
</Frame>

<Tip>
  **Important Notes - Mode Configuration**

  Ensure your PayPal credentials and `PAYPAL_MODE` setting match:

  * Sandbox credentials → `PAYPAL_MODE` = `sandbox`
  * Live credentials → `PAYPAL_MODE` = `live`

  Mismatched modes will cause authentication failures.

  **To accept real payments, you MUST use Live Mode.**
</Tip>

***

### 4. Add PayPal Payment Button

Simply tell AI what you need:

**Example 1: Single Product**

```
Add a PayPal payment button for this product:
Product name: Premium Course
Price: $99 one-time payment
```

**Example 2: E-commerce Products**

```
Add PayPal buttons to these products:
- Cotton T-Shirt: $25
- Wireless Headphones: $89
- Smart Watch: $199
```

**Example 3: Subscription**

```
Add PayPal subscription payment:
Plan name: Pro Membership
Price: $19/month with 7-day free trial
```

AI will automatically:

* ✅ Add PayPal button to your products
* ✅ Handle payment processing
* ✅ Set up success/confirmation pages

<Frame>
  <img alt="" />
</Frame>

<Tip>
  **Success Indicators**

  * [ ] PayPal button appears on your page
  * [ ] Clicking opens PayPal payment page

  ✅ Ready to test!
</Tip>

***

### 5. Test Your Payment

**Ready to Test?**

You can test PayPal payment directly in the Readdy Preview Frame:

1. Click the PayPal button on your product/page
2. Complete the payment
3. Verify everything works correctly

<Tip>
  **Quick Test Tips**

  * Start with a low-priced product (\$1-5) for testing
  * You can refund test transactions if needed
  * PayPal's official recommendation: test with small real transactions

  ✅ That's it!
</Tip>

**Need Sandbox Testing?**

If you prefer to test with virtual money, refer to:

* [PayPal Official Testing Documentation](https://developer.paypal.com/docs/subscriptions/test-subscriptions/)
* [PayPal Developer Dashboard](https://developer.paypal.com/dashboard/)

***

## FAQ

<AccordionGroup>
  <Accordion title="Can I Use PayPal and Stripe Together?">
    Yes! We recommend using both to let customers choose their payment method.

    This can increase conversion by 15-30%.
  </Accordion>

  <Accordion title="What If Payment Fails?">
    Follow these troubleshooting steps:

    1. **Verify Your PayPal Credentials**
       * Confirm your Client ID and Secret are correct

    2. **Check Supabase Configuration**
       * Review the three PayPal secrets in Supabase (Step 3 above)
       * Check for extra spaces or typos in the values
       * Ensure `PAYPAL_MODE` matches your credential type (sandbox/live)

    3. **Ask Readdy AI for Help**
       * Describe the issue in the chat
       * AI can help diagnose and fix configuration problems

    4. **Contact Support**
       * [Submit a support ticket](https://readdy.ai/feedback) if the issue persists
  </Accordion>

  <Accordion title="Do Customers Need a PayPal Account?">
    No!

    Customers can choose:

    * Pay with PayPal account
    * Pay with credit/debit card (no PayPal registration required)

    This makes PayPal friendly to non-PayPal users.
  </Accordion>

  <Accordion title="What's the Difference Between Personal and Business PayPal Accounts for API Access?">
    You need a Business PayPal account to accept real payments on your website. [Sign up for free](https://www.paypal.com/business).

    **Personal vs Business Accounts**:

    * Personal accounts can only access the Sandbox (test environment)
    * Business accounts can access both Sandbox and Live production environments
  </Accordion>
</AccordionGroup>

***

## Need Help?

### Contact Support

* 💬 **Ask AI**: Available in your project
* 📧 **Readdy Support**: [Submit a support ticket](https://readdy.ai/feedback)

### PayPal Resources

* 🔧 **PayPal Developer Support**: [Contact Support](https://developer.paypal.com/docs/support/)

***

**Good luck with your PayPal integration!** 🎉


# PayPal (via Connects)
Source: https://docs.readdy.ai/integrations/paypal-v2

Accept secure one-time PayPal payments on your Readdy website with your own PayPal Business account

PayPal is a global payment service provider that lets businesses accept online payments through PayPal and other eligible funding options. You can connect your PayPal merchant app to a Readdy project and ask AI to add a secure payment flow to your website.

Once connected, Readdy can generate PayPal checkout buttons for one-time payments, create and capture payments securely, and update the corresponding order in your connected database.

<Frame>
  <img alt="PayPal Integration" />
</Frame>

## Before You Start

This guide will walk you through connecting PayPal to your Readdy project. Before you begin, make sure you have the following ready:

* A PayPal Business account with access to the [PayPal Developer Dashboard](https://developer.paypal.com/dashboard/applications).

* A Readdy project connected to [Readdy Backend](/features/backend) or [Supabase](/integrations/supabase).

* Products, a cart, or a checkout page that you want customers to pay for through PayPal.

<Info>
  Readdy currently supports one-time PayPal payments. Subscriptions, automatic billing, refunds, payouts, marketplace payments, and platform fees are not included in this integration.
</Info>

Once these are ready, let's connect PayPal.

## Get Your PayPal App Credentials

<Steps>
  <Step title="Open the PayPal Developer Dashboard">
    Go to the [PayPal Developer Dashboard](https://developer.paypal.com/dashboard/applications), sign in, and open **"Apps & Credentials"**.

    <Frame>
      <img alt="Apps and Credentials page in the PayPal Developer Dashboard" />
    </Frame>
  </Step>

  <Step title="Choose the Environment">
    Select **"Sandbox"** while building and testing your website, or **"Live"** when you are ready to accept real payments.

    <Info>
      Sandbox payments use test accounts and do not move real money. Live payments are processed through your PayPal Business account.
    </Info>

    <Frame>
      <img alt="Sandbox and Live environment selector in the PayPal Developer Dashboard" />
    </Frame>
  </Step>

  <Step title="Create a Merchant App">
    Open the "Apps & Credentials" tab.

    <Frame>
      <img alt="Apps and Credentials page in the PayPal Developer Dashboard" />
    </Frame>

    Click **"Create App"**, enter an app name, and choose **"Merchant"** as the app type. If PayPal asks you to select a Sandbox account, choose a Sandbox Business account.

    <Frame>
      <img alt="Creating a Merchant app in the PayPal Developer Dashboard" />
    </Frame>
  </Step>

  <Step title="Copy the App Credentials">
    Open the app, then copy its **Client ID** and **Client Secret**. If the secret is hidden, click **"Show"** before copying it.

    <Frame>
      <img alt="App credentials for a PayPal Merchant app" />
    </Frame>
  </Step>
</Steps>

<Warning>
  Choose **"Merchant"**, not **"Platform"**. Platform apps are designed for partner onboarding, marketplaces, platform fees, and multiparty payments, which Readdy's current PayPal integration does not support.
</Warning>

<Note>
  The Client ID and Client Secret must come from the same app and the same environment. Do not combine a Sandbox credential with a Live credential.
</Note>

Readdy accepts both Sandbox and Live credential pairs and detects the environment automatically. You do not need to choose an environment in Readdy or manually add PayPal secrets to Supabase.

For more information about PayPal credentials, see the [PayPal REST API authentication guide](https://developer.paypal.com/api/rest/authentication/).

## Connect PayPal in Readdy

<Steps>
  <Step title="Open the Connects Panel">
    In the Readdy editor, click **"Connects"** at the top of the screen.

    <Frame>
      <img alt="Connects button at the top of the Readdy editor" />
    </Frame>
  </Step>

  <Step title="Select PayPal">
    Find **"PayPal"** in the Connects panel, then click **"Connect"**.

    <Frame>
      <img alt="PayPal integration in the Readdy Connects panel" />
    </Frame>

    <Info>
      If your project does not have a connected database, Readdy asks you to connect **Readdy Backend** or **Supabase** first. PayPal uses the connected backend to validate order amounts, create orders, keep the Client Secret secure, and confirm payments.
    </Info>
  </Step>

  <Step title="Enter Your App Credentials">
    Paste the matching **Client ID** and **Client Secret**, then click **"Connect"**.

    <Frame>
      <img alt="Client ID and Client Secret fields in the Readdy PayPal connection panel" />
    </Frame>
  </Step>

  <Step title="Confirm the Connection">
    Check that the panel displays **"Connected"** and masks both credentials.

    <Frame>
      <img alt="PayPal connected in Readdy with masked credentials" />
    </Frame>
  </Step>

  <Step title="Ask Readdy to Add the Payment Flow">
    Ask Readdy AI to add PayPal to the products, cart, or checkout button on your website. Clearly describe where PayPal should appear and what should happen after a successful payment.

    For example:

    > Add PayPal as a payment option on my cart checkout. Let the customer approve the payment and show the order confirmation only after the payment is verified.

    <Frame>
      <img alt="Example website with a PayPal checkout flow" />
    </Frame>
  </Step>
</Steps>

## Best Practices

* Tell Readdy AI which products, cart, or checkout button should use PayPal.

* Start with Sandbox credentials and test the complete customer journey through your website's share link or published URL before switching to Live.

* Keep your Client Secret private. Never paste it into chat, generated page code, or a public repository.

* Verify the payment amount, currency, and order status before fulfilling an order.

* If you change credentials, regenerate and republish your website before sending customers to checkout again.

<Warning>
  Readdy provides the PayPal integration but does not participate in payment processing or hold your funds. You receive funds directly through your PayPal Business account. If Readdy and PayPal show different payment records, verify the payment in PayPal before fulfilling or refunding the order.
</Warning>

## FAQ

<AccordionGroup>
  <Accordion title="Should I create a Merchant app or a Platform app?">
    Create a **Merchant** app. Readdy uses your own PayPal Business account to process payments directly for your store. Platform apps are intended for marketplaces, partner onboarding, platform fees, and multiparty payments.
  </Accordion>

  <Accordion title="Why does Readdy reject my credentials?">
    Make sure the Client ID and Client Secret come from the same Merchant app and the same Sandbox or Live environment. Open the app in **"Apps & Credentials"**, copy both complete values again, and retry the connection.
  </Accordion>

  <Accordion title="Can I connect Sandbox credentials?">
    Yes. Readdy accepts both Sandbox and Live credentials and detects the environment automatically. Sandbox payments are for testing and do not move real money.
  </Accordion>

  <Accordion title="Why do I need to connect a database first?">
    Readdy uses the connected backend to validate order amounts, create orders, protect your Client Secret, confirm payments with PayPal, and update the order only after payment succeeds.
  </Accordion>

  <Accordion title="Does Readdy expose my Client Secret in the website?">
    No. The website receives only the public Client ID. The Client Secret remains in the connected backend and is used only by server-side payment functions.
  </Accordion>

  <Accordion title="Which payment options will customers see?">
    PayPal decides which eligible account and funding options to display based on your merchant setup, the buyer, currency, country, and PayPal availability.
  </Accordion>

  <Accordion title="How do I change my PayPal credentials?">
    Open **"Connects"**, select **"PayPal"**, and click **"Change credentials"**. Enter the new matching pair, then regenerate and republish your website so its public Client ID matches the newly connected app.
  </Accordion>

  <Accordion title="Can I use PayPal for Shopify products?">
    Shopify products continue through Shopify Checkout. This PayPal integration is for products and orders managed through Readdy Backend or Supabase.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Readdy Agent
Source: https://docs.readdy.ai/integrations/readdy-agent

Enhance communication on your website with an AI-driven chat and voice assistant for improved customer engagement.

## 📋 Overview

<Frame>
  <img alt="Readdy Agent Overview" />
</Frame>

Readdy Agent is an AI-powered assistant for your website. It automatically responds to visitor inquiries, guides users, schedules appointments, and delivers 24/7 support without manual effort.

With both chat and voice modes, Readdy Agent makes your website more interactive, enhances the customer experience, and helps boost conversions.

### 📌 Why Use Readdy Agent?

Readdy Agent is built to support key customer interactions, even when your team is offline. It’s especially useful for:

* Answering product or service questions from website visitors
* Assisting users outside of business hours
* Helping users schedule appointments or book services directly via chat or voice

By automating these tasks, Readdy Agent helps you:

* Save effort on handling customer inquiries
* Increase conversion and booking rates
* Improve visitor satisfaction and engagement
* Provide 24/7 real-time assistance
* Collect valuable data on user intent and behavior

Whether you're offering services or selling products, Readdy Agent ensures you never miss a lead or a booking.

### 💡 Feature Hightlights

* **Smart Chat & Voice Assistant** – Engage visitors in real-time through natural chat or voice conversations. Understands questions and responds like a human assistant.
* **AI-Powered Appointment Scheduling** – Visitors can check availability, book, reschedule, or cancel appointments directly through chat or voice interaction.
* **Multilingual & Region-Aware** – Supports 15+ languages and regions, including English, Simplified/Traditional Chinese, Japanese, Korean, Spanish, and more.
* **Automatic Lead Capture** – Every interaction is logged with full conversation history or summary, timestamps, and contact info to help you capture more leads effortlessly.
* **Fully Customizable Assistant** – Personalize the assistant’s tone, language, prompts, and FAQs. Optional email alerts and smart settings keep you in control.

## 📖 How to Use

### 1. Getting Started - Add Readdy Agent to Your Project

You can add the Readdy Agent when creating a project or at any time afterward.

#### Add Through Chat

* **When creating a new project**, simply describe your needs in the prompt. For example:
  * “Set up an online booking system for easy event planning”
  * “Add a smart chat and voice assistant to my website”
  * “Create an AI receptionist that can answer product questions and help schedule demos”
* **For existing projects**, you can activate Readdy Agent anytime by chatting with Readdy:
  * “Add a customer service assistant to this site”
  * “Can you help me set up appointment scheduling?”
  * “Enable the AI chat and voice assistant for this project”

#### Add Through the Connects Panel

Alternatively, you can also add the Readdy Agent from the navigation bar:

* Click the **Connects** button at the top, then select **Readdy Agent**.
* This will automatically send the message: `“Add Readdy Agent to my project”` to the chat and begin the setup process.

<Frame>
  <img alt="Connects button in the top navigation bar" />
</Frame>

<Frame>
  <img alt="Readdy Agent in the Connects panel" />
</Frame>

### 2. Configuration – Optional, but Recommended

Once Readdy adds the assistant to your project, you’ll receive a confirmation message along with helpful suggestions like:

<Frame>
  <img alt="You will receive chat message with Agent config buttons." title="Agent Config Buttons in Chat" />
</Frame>

<Tip>
  You can choose to set up your calendar right away, or continue building your website and return to configuration later.
</Tip>

#### Accessing Configuration

You can access the Readdy Agent configuration via Project Settings in the following ways:

1. From the top navigation bar: Click `Readdy Agent` button at the top of the page

   <Frame>
     <img alt="Click &#x22;Readdy Agent&#x22; from Navigation Bar" />
   </Frame>
2. From the Project dropdown: Click `⋮` of current project → Select `Setting`

   <Frame>
     <img alt="Click on the project dropdown, select more, and direct to &#x22;Setting&#x22;" title="Access &#x22;Project Setting&#x22; from Project List" />
   </Frame>

<Tip>
  Even without manual setup, Readdy will auto-generate a smart assistant based on your project type and content. Configuration is optional, but helps fine-tune the experience for your visitors.
</Tip>

## 📅 Appointments - Manage Your Bookings with Ease

### Setup Calendar and Availability

<Frame>
  <img alt="Initial state of appointment page - setup availability" />
</Frame>

<br />

<Frame>
  <img alt="You can also setup availability in the modal dialog." />
</Frame>

#### Set Your Availability

* **Availability**\
  By default, your working hours are set to **Monday to Friday, 9:00 AM – 5:00 PM**.\
  You can adjust this by clicking on the calendar interface to add or remove time blocks.

  <Warning>
    Make sure your business hours are aligned across **Website, Global Prompt, and Availability settings** to avoid confusion and booking errors.
  </Warning>
* **Timezone Display**\
  Your calendar will automatically use your **browser’s timezone**.

#### Appointment Minimum Duration

Set the minimum duration for each appointment session.

* **Default setting**: 1 hour
* You can enter a number and choose the time unit: **Minute**, **Hour**, or **Day.**

<Note>
  - Only whole numbers are allowed.
  - The duration you set must fit within your available time slots.
</Note>

#### Minimum Advance Booking Period (Optional)

This setting controls how far in advance users must book an appointment.

* Default: Disabled.
  * When disabled, no restrictions are applied.
  * When enabled, you can enter a value and choose the unit: Minute, Hour, or Day.

<Note>
  Only whole numbers are allowed.
</Note>

### Appointment List

In the Appointment List, you can view and manage all your scheduled, past, and canceled appointments. This helps you stay organized and quickly access appointment details when needed.

<Frame>
  <img alt="When visitors make appointments successfully, the page will list your upcoming appointments." />
</Frame>

#### Appointment Categories

Appointments are grouped into three tabs. You can switch between them at the top of the page:

1. **Upcoming** Shows all upcoming appointments and is further divided into:
   * Today – appointments are happening today
   * Next – appointments scheduled for future dates (not today)
2. **Past** Appointments that are scheduled for a time that has already passed

   <Info>
     Note: This includes all appointments in the past, whether they actually occurred or not.
   </Info>
3. **Canceled** Appointments that were canceled by either you or the customer.

#### What You’ll See in Each Appointment

* **Appointment ID** – A unique reference number for each booking
* **Status** – Only shown for appointments in the Upcoming tab
* **Customer Name** – The name provided by the person who booked
* **Phone Number** – The number provided by the person who booked
* **Appointment Time** – When the appointment is scheduled
* **Conversation Record** – Based on how the appointment was made:
  * Voice: Shows a summary of the call
  * Chat: Shows the chat history

#### Manual Refresh

Need to check for the latest updates? Click the Refresh button to reload and sync the latest data from the system.

#### Modify Calendar and Availability

Click Availability to open a pop-up window where you can update your settings.

## 🧲 Leads – Capturing Opportunities from Every Interaction

Leads are automatically generated records of visitors who interacted with your Readdy Agent—whether through chat or voice. Even if a visitor didn’t book an appointment, their inquiry, conversation, or intent is captured as a Lead.

<Note>
  Think of Leads as the top of your sales funnel—every conversation is a potential business opportunity.
</Note>

Leads help you identify visitors who showed interest in your services but didn’t convert right away. These interactions can be invaluable for follow-ups, marketing, and sales.

<Frame>
  <img alt="When visitors chat or make voice calls with your assistant, the page will list leads of your business." />
</Frame>

### Leads Table Overview

The Leads section is displayed in a table format, where each row represents one visitor interaction. The table includes the following columns:

| Column Name | Description                                                                         |
| ----------- | ----------------------------------------------------------------------------------- |
| Record Time | The timestamp when the visitor first interacted with the Readdy Agent               |
| Status      | The current status of the session: `New`, `Ongoing`, `Ended`, `Error`               |
| Channel     | The type of interaction: `Chat`, `Voice`                                            |
| Duration    | For voice interactions: the length of the call                                      |
| Total Chats | For chat interactions: total number of message pairs                                |
| Summary     | For voice interactions: a brief summary of the conversation generated by the system |

Click on any row in the Leads table to open a detail panel on the right side of the screen. This panel includes:

* All available metadata (record time, status, channel, etc.)
* For chat leads: full chat history is displayed
* For voice leads: a concise summary of the conversation is shown

<Info>
  Chat-based leads do not include a summary, but you can view the entire chat transcript to understand the visitor’s intent.
</Info>

<Tip>
  ### Tips for Using Leads Effectively

  * Regularly reviewing New and Ended leads to spot high-potential contacts
  * Use the Summary or History to quickly assess the value of conversations
  * Follow up with leads that didn’t convert—many may still be interested
</Tip>

### Monitoring Usage

At the top of the **Leads** page, you can easily track your current usage:

* **Voice**: remaining minutes / total minutes
* **Chat**: remaining chats / total chats

This gives you a quick overview of how much quota is left in your current billing cycle.\
If either voice or chat usage reaches the plan limit, a warning message will appear to alert you before service is interrupted.

<Frame>
  <img alt="Screenshot 20250918 210359 Pn" />
</Frame>

## ⚙️ Settings – Customize Your Readdy Agent

The Settings page allows you to configure how your Readdy Agent behaves and communicates with your website visitors. These settings help tailor the assistant’s tone, language, and knowledge base to better serve your business needs.

<Frame>
  <img alt="Readdy Agent Settings" />
</Frame>

### 🧠 Global Prompt

The Global Prompt is the instruction set given to your Readdy Agent. It defines what the assistant should do, how it should behave, and includes important context such as:

* Your business background
* Website-specific information
* Any special instructions or tone of voice

When you add the Readdy Agent to your project, Readdy automatically generates a default prompt based on your website content and setup.

You can manually edit the prompt anytime to fine-tune how the assistant responds.

### 🌐 Language

When you first enable the Readdy Agent, a default language is selected based on your website content and goals. However, you can manually change the language at any time from the dropdown menu.

<Note>
  You don’t need to worry too much about language preferences. The Readdy Agent will automatically respond in the visitor’s language based on how they initiate the conversation.
</Note>

| Supported languages include: |
| ---------------------------- |
| English                      |
| German                       |
| Spanish                      |
| French                       |
| Hindi                        |
| Japanese                     |
| Korean                       |
| Dutch                        |
| Portuguese                   |
| Russian                      |
| Turkish                      |
| Vietnamese                   |
| Chinese                      |
| Chinese (Taiwan)             |

### ❓ FAQs

The FAQs section allows you to provide additional context to your Readdy Agent by adding frequently asked questions and their answers.

* These FAQs enhance the Global Prompt and help the assistant handle common visitor inquiries more accurately.
* You can manually add up to 10 FAQ entries.

> Use Case: Add questions like “What are your business hours?” or “Do you offer international shipping?” to ensure quick, accurate responses.

### ⚠️ Keep Your Business Hour Consistent

<Warning>
  To ensure the Readdy Agent provides accurate information and improves appointment success rates, please make sure your business hours are consistent across the following places in your project:

  1. **Website content** – if business hours are shown publicly on your site
  2. **Calendar Availability settings** – where actual bookable time slots are configured
  3. **Global Prompt** – if you’ve informed the AI about your hours here
  4. **FAQs** - if your business hours are mentioned in any frequently asked questions

  Inconsistent settings may cause the AI to give conflicting information or reduce the chances of successful bookings.
</Warning>

### 📬 New Appointment Notification

This toggle allows you to control whether you want to receive email notifications when a new appointment is booked through the Readdy Agent.

* Notifications are sent to the email address registered with your Readdy account.
* You can enable or disable this feature manually in the Settings panel.

<Tip>
  Stay informed: Keep this enabled to never miss a new lead or booking.
</Tip>

## 📊 Usage Tiers & Limits

| Subscription | Voice Minutes | Chats Count |
| ------------ | :------------ | :---------- |
| Free         | 5 min         | 50 chats    |
| Starter      | 20 min        | 200 chats   |
| Pro-40       | 80 min        | 800 chats   |
| Pro-80       | 160 min       | 1600 chats  |
| Pro-120      | 250 min       | 2500 chats  |
| Pro-160      | 350 min       | 3500 chats  |
| Pro-200      | 450 min       | 4500 chats  |

<Info>
  Chats Count

  * A “chat” refers to one interaction where the user sends a message and Readdy Agent responds or takes an action.
  * Most chat sessions typically consist of 2–3 messages.
</Info>

<Info>
  Usage Limitation

  * When your subscription’s voice minutes or chat limits are reached, the Readdy Agent will stop operating on your website.
  * Please monitor your usage and email notifications to avoid interruptions.
  * Usage limits reset with each subscription cycle.
  * All published projects under the same account share the same usage quota.
</Info>

## Need Help?

If this guide doesn’t resolve your issue, contact us at [hi@readdy.ai](mailto:hi@readdy.ai) or use the live chat in the top‑right corner of Readdy. We’re here to help!


# Readdy Booking
Source: https://docs.readdy.ai/integrations/readdy-booking

Create booking calendars, set availability, and manage appointment information in Readdy

With Readdy Booking, you can easily add booking functionality to your website, allowing visitors to book services online directly.

## How to Use

<Steps>
  <Step title="Enter Your Project">
    Open the project where you want to add booking functionality.
  </Step>

  <Step title="Open Connects">
    Click the **Connects** button in your project.

    <Frame>
      <img alt="Connects button in the top navigation bar" />
    </Frame>
  </Step>

  <Step title="Add Readdy Booking">
    Find **Readdy Booking** in the Connects panel and click **Connect**.

    <Frame>
      <img alt="Readdy Booking in the Connects panel" />
    </Frame>
  </Step>

  <Step title="View Feature Panel">
    After opening the panel, you'll see two core features:

    * **Create Booking**: AI automatically generates a booking component in your project
    * **Setting Availability**: Configure your available booking times

    <Frame>
      <img alt="Readdy Booking Panel" />
    </Frame>

    <Warning>
      **Recommendation**: Complete Setting Availability first, then create the component to ensure users see the correct available times.
    </Warning>
  </Step>
</Steps>

### Create Booking Component

Click **Create Booking**, and AI will automatically generate a booking calendar component based on your current page content.

<Frame>
  <img alt="Create Booking Component" />
</Frame>

After the component is created:

* Users can book appointments on your website
* Booking data will automatically appear on the Appointments page
* You can customize the component's style, fields, and interactions in the editor

### Configure Availability

Click **Setting Availability** to set your available dates and time slots.

<Frame>
  <img alt="Set Availability" />
</Frame>

<Info>
  This setting is shared with Readdy Agent. Modifications in either location will sync in real-time without requiring duplicate configuration.
</Info>

## View Appointment Information

Appointments submitted by users will automatically appear on the **Appointments** page, where you can view:

* Appointment time
* Information filled in by users
* Related notes and comments

<Frame>
  <video>
    <source type="video/mp4" />
  </video>
</Frame>

## FAQ

<AccordionGroup>
  <Accordion title="Do I need to republish after modifying availability?">
    No. After modifying Availability, it will automatically sync without requiring component recreation or publishing a new version.
  </Accordion>

  <Accordion title="Will Availability settings affect Readdy Agent?">
    Yes. Readdy Booking and Readdy Agent use the same Availability configuration, and modifications will sync in real-time.
  </Accordion>

  <Accordion title="Can I customize the booking form fields?">
    Yes. After creating the component, you can add more information collection fields in the editor, such as notes, special requirements, etc.
  </Accordion>

  <Accordion title="How can users cancel or reschedule an appointment?">
    Users can cancel or reschedule appointments by chatting with Readdy Agent. Make sure you have the Agent feature enabled on your website so users can interact with it to manage their bookings.
  </Accordion>
</AccordionGroup>


# Integrate with Resend
Source: https://docs.readdy.ai/integrations/resend

Send form notification emails using your own custom domain and brand identity with Resend integration

## Quick Start

1. Make sure you have a **Readdy Pro** subscription
2. Log in to [Resend](https://resend.com/api-keys) and create an API Key with **Full Access** permission
3. Open the Resend configuration from the Readdy integration panel
4. Paste API Key → Select a verified domain → Configure email settings → Send test → Done

Read on for detailed instructions.

***

## Overview

Resend is a professional email delivery service. By integrating Resend with Readdy, you can send form notification emails using your own custom domain and brand identity, improving your professional image and email deliverability.

### Key Features

* Send notification emails from your own domain
* Customize sender name, email address, and email subject
* Support email subject variable substitution
* Real-time test email sending

### Prerequisites

* **Readdy Pro** plan required (project does not need to be published)
* A Resend account (free sign-up: [resend.com](https://resend.com))
* A custom domain added and verified in Resend; custom domains purchased on Readdy are supported

<Tip>
  Resend does not require your project to be published, but a Readdy Pro subscription is needed.
</Tip>

<Warning>
  Do not enter a Readdy subdomain (e.g. `xxx.readdy.ai`) in Resend — it cannot be verified.
</Warning>

***

## Entry Points

You can access the Resend configuration through:

**1. Connects Panel** — Click the **Connects** button in the project editor to find the Resend card.

<div>
  <div>
    <Frame>
      <img alt="Connects button in the top navigation bar" />
    </Frame>

    <p>Click the Connects button</p>
  </div>

  <div>
    <Frame>
      <img alt="Resend in the Connects panel" />
    </Frame>

    <p>Resend in the Connects panel</p>
  </div>
</div>

**2. TopBar Indicator** — After configuration, a Resend icon appears in the top toolbar; click it to quickly view status or access settings.

<div>
  <Frame>
    <img alt="Resend status indicator and dropdown menu in the TopBar" />
  </Frame>

  <p>Resend status indicator and dropdown menu in the TopBar</p>
</div>

**3. Project Notification Settings** — In Project Settings > Notification Settings, you can see Resend configuration and the Brand Email toggle.

***

## Configuration Steps

Resend configuration consists of 4 steps: **API Key → Domain Selection → Email Settings → Test Send**.

<Steps>
  <Step title="Step 1: Enter API Key">
    Log in to the [Resend Console](https://resend.com/api-keys) and go to the **API Keys** page, then create a new API Key.

    <Warning>
      You must select **"Full Access"** permission. If you choose "Sending Access" or other restricted permissions, domain lists will fail to load and email sending will not work properly.
    </Warning>

    Copy the generated API Key (starts with `re_`), paste it in the Readdy Resend configuration panel, and click **"Next"** — the system will automatically validate the Key.

    The configuration panel includes a tutorial video to help you quickly learn how to create an API Key in Resend.

    <div>
      <div>
        <Frame>
          <img alt="Resend Console API Key creation page" />
        </Frame>

        <p>Resend Console API Key creation page — select "Full Access" permission</p>
      </div>

      <div>
        <Frame>
          <img alt="API Key input step in Readdy" />
        </Frame>

        <p>API Key input step in Readdy</p>
      </div>
    </div>
  </Step>

  <Step title="Step 2: Select Domain">
    After the API Key is validated, the system will automatically fetch your domain list from Resend.

    * **Verified domains** — Displayed with a green "Verified" badge; click to select directly
    * **Custom domains bound in Readdy (unverified)** — Support one-click verification; see details below
    * **Other domains (added only in Resend, unverified)** — Click "Verify" to go to the Resend Console, where you need to manually add DNS records to complete verification

    Only verified domains can be selected to proceed to the next step. If the domain list is empty, please add a domain in the Resend Console first.

    <Accordion title="One-Click Verification for Readdy Domains">
      If the domain you added in Resend was purchased or bound through Readdy, you can complete one-click verification with the following steps — no manual DNS configuration required:

      1. Add your domain in the Resend Console and go to the DNS Records configuration page
      2. You do not need to manually add DNS records — simply click the **"I've added the records"** button at the bottom of the page
      3. Return to the Readdy Resend configuration panel
      4. Find the domain in the domain list and click the **"Verify"** button next to it
      5. Readdy will automatically configure all required DNS records (DKIM, SPF, DMARC, etc.) for you
      6. Once verification is complete, click the **Refresh** button to update the domain status

      <Tip>
        One-click verification only applies to custom domains bound in Readdy. If your domain is managed by another provider (e.g. Cloudflare, GoDaddy, etc.), you will need to manually add DNS records in the Resend Console following the instructions on the DNS Records page.
      </Tip>
    </Accordion>

    <Frame>
      <img alt="Domain selection list showing verified and unverified domains" />
    </Frame>

    <p>Domain selection list in Readdy</p>

    <div>
      <div>
        <Frame>
          <img alt="Resend DNS Records page" />
        </Frame>

        <p>Resend DNS Records page — click "I've added the records"</p>
      </div>

      <div>
        <Frame>
          <img alt="Click Verify in Readdy" />
        </Frame>

        <p>Click "Verify" button in Readdy</p>
      </div>

      <div>
        <Frame>
          <img alt="Domain verified in Resend" />
        </Frame>

        <p>Domain verified in Resend Console</p>
      </div>

      <div>
        <Frame>
          <img alt="Domain verified in Readdy" />
        </Frame>

        <p>Domain now shows as verified in Readdy</p>
      </div>
    </div>
  </Step>

  <Step title="Step 3: Configure Email Settings">
    Configure your notification email sending information. A real-time email preview is displayed above the form:

    * **Sender Name** (required) — The display name recipients will see, e.g. "Your Company Name", up to 50 characters
    * **Sender Email** (required) — Enter the email prefix; the system will automatically append the selected domain. For example, entering `notification` results in `notification@yourdomain.com`. The default prefix is `notification`
    * **Email Subject** (required) — Supports the following variables:
      * Project name
      * Form name
      * Submission time
    * **Reply-To Address** (optional) — The address where user replies will be sent. If left empty, the sender email is used

    <Frame>
      <img alt="Email configuration page with real-time preview" />
    </Frame>

    <p>Email configuration page with real-time preview area</p>
  </Step>

  <Step title="Step 4: Send Test Email">
    Enter an email address to send a test email and verify your configuration.

    * After a successful send, click the **"Complete"** button to finish the configuration
    * You can also click **"Skip & Finish"** to complete the setup without sending a test

    <Frame>
      <img alt="Test email sending page" />
    </Frame>

    <p>Test email sending page</p>
  </Step>
</Steps>

***

## Post-Connection Management

After configuration is complete, you enter the "Connected" state. In the configuration panel, you can:

* **View configuration summary** — API Key (masked), domain, and email settings details
* **Switch domain** — Click the "Switch" button on the domain card to select a different verified domain
* **Modify email settings** — Click the "Modify" button on the email settings card to change sender, subject, etc.
* **Send test email** — Click the "Send Test Email" button to verify your configuration at any time
* **Refresh status** — Click the refresh button in the top-right corner to get the latest configuration status
* **Disconnect** — Click the "Disconnect" link at the bottom

<Info>
  To change the API Key, you need to disconnect and reconfigure; or when the API Key becomes invalid, click the **"Reconfigure"** button to enter a new API Key.
</Info>

<Frame>
  <img alt="Connected state configuration management panel" />
</Frame>

<p>Connected state configuration management panel</p>

***

## Brand Email Toggle

In **Project Settings > Notification Settings**, you can use the **"Brand Email"** toggle to control whether Resend is used to send notification emails:

* **On** — Send emails using your configured brand domain and information
* **Off** — Send emails using Readdy's default method

After completing the Resend configuration for the first time, Brand Email is enabled by default.

<Frame>
  <img alt="Brand Email toggle in Notification Settings" />
</Frame>

<p>Brand Email toggle in Notification Settings</p>

***

## Error State Handling

<AccordionGroup>
  <Accordion title="Invalid API Key">
    **Symptom:** A red warning appears at the top of the configuration panel, showing "Configuration Invalid"

    **Cause:** The API Key was deleted, revoked, or has insufficient permissions in the Resend Console

    **Solution:** Click the "Reconfigure" button, create a new Full Access API Key in Resend, and re-enter it

    <Frame>
      <img alt="Invalid API Key error state" />
    </Frame>

    <p>Invalid API Key error state</p>
  </Accordion>

  <Accordion title="Domain Removed">
    **Symptom:** A red warning appears at the top of the configuration panel, indicating the domain has been removed

    **Cause:** The domain was deleted or its verification expired in the Resend Console

    **Solution:** Click the "Switch" button and select another verified domain

    <Frame>
      <img alt="Domain Removed error state" />
    </Frame>

    <p>Domain Removed error state</p>
  </Accordion>

  <Accordion title="Quota Exceeded">
    **Symptom:** An orange warning appears at the top of the configuration panel, indicating the quota has been exceeded

    **Cause:** The Resend account's monthly email sending quota has been exceeded

    **Solution:** Click "View in Resend" to upgrade your Resend plan or wait for the quota to reset

    <Frame>
      <img alt="Quota Exceeded error state" />
    </Frame>

    <p>Quota Exceeded error state</p>
  </Accordion>
</AccordionGroup>

***

## FAQ

<AccordionGroup>
  <Accordion title="Can I use Resend without publishing my project?">
    Yes, Resend does not require your project to be published. However, a Readdy Pro subscription is required to use this feature.
  </Accordion>

  <Accordion title="What permission should I select for the API Key?">
    You must select **"Full Access"** permission. Restricted permissions such as "Sending Access" are insufficient for operations like fetching the domain list, and will cause configuration to fail. If you experience an empty domain list or sending failures, check your API Key permission settings first.
  </Accordion>

  <Accordion title="What should I do if the domain list is empty?">
    1. Confirm that the API Key has **Full Access** permission
    2. Confirm that you have added and verified a domain in the Resend Console
    3. Click the refresh button on the domain list to reload
    4. If it is still empty, click the "Add Domain" button to go to the Resend domain management page
  </Accordion>

  <Accordion title="What should I do if the test email fails to send?">
    Test sending may encounter the following errors:

    | Error           | Cause                                               | Solution                                                                                       |
    | --------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
    | Invalid API Key | API Key was deleted or has insufficient permissions | Click "Reconfigure" and create a new Full Access API Key                                       |
    | Domain Removed  | Domain was deleted in the Resend Console            | Go to Resend and check the domain status                                                       |
    | Rate Limited    | Too many sends in a short period                    | Wait a few minutes and click "Retry"                                                           |
    | Quota Exceeded  | Resend monthly sending quota exceeded               | Upgrade your Resend plan or wait for the quota to reset                                        |
    | Send Failed     | Other reasons                                       | Click "Retry"; if the issue persists, check domain verification status and API Key permissions |
  </Accordion>

  <Accordion title="What happens after disconnecting?">
    * Notification emails will revert to Readdy's default sending method
    * The sender will display as a Readdy email address instead of your brand email
    * The API Key will be removed from Readdy, but your Resend account will not be affected
    * You can reconfigure at any time
  </Accordion>

  <Accordion title="Why are Readdy subdomains not supported?">
    Resend requires a custom domain to send emails. Readdy subdomains (e.g. `xxx.readdy.ai`) are not domains you own and cannot be added or verified in Resend. Please bind your own custom domain in Readdy before using this feature.
  </Accordion>
</AccordionGroup>

## Need Help?

### Contact Support

* **Ask AI**: Available in your project
* **Readdy Support**: <a href="https://readdy.ai/feedback">Submit a support ticket</a>


# Integrate with Resend (Supabase)
Source: https://docs.readdy.ai/integrations/resend-supabase

Add email functionality to your Readdy website using Resend and Supabase for transactional emails and notifications

## What is Resend?

Resend is a powerful email API platform that makes it easy to send transactional emails at scale. By integrating Resend with your Readdy website, you can:

* Send appointment confirmation emails
* Deliver booking notifications
* Automate customer communication
* Ensure reliable email delivery

This guide will walk you through setting up Resend integration for appointment and booking scenarios.

## 1. Basic Configuration

<Steps>
  <Step title="Step 1: Connect Supabase Database">
    Connect your Supabase database to your Readdy project. This database will store booking records and user information.

    Click the **Connects** button at the top, then select **Supabase** to connect.

    <Frame>
      <img alt="Connects button in the top navigation bar" />
    </Frame>

    <Frame>
      <img alt="Supabase in the Connects panel" />
    </Frame>

    📖 **Learn More**: <a href="/integrations/supabase">Supabase Integration Documentation</a>
  </Step>

  <Step title="Step 2: Sign Up for Resend">
    Go to [https://resend.com](https://resend.com) and create your account. Complete the registration process and log in to your dashboard.
  </Step>

  <Step title="Step 3: Get Your Resend API Key">
    In your Resend dashboard, navigate to **API Keys** section.

    Click **Create API Key** to generate a new key. Choose appropriate permissions for your use case.

    <Frame>
      <img alt="Resend API key creation" />
    </Frame>

    <Warning>
      Keep your API key secure and never share it publicly. Store it in a safe place as you'll only see it once during creation.
    </Warning>
  </Step>

  <Step title="Step 4: Configure Resend in Readdy">
    Tell Readdy AI that you want to configure Resend for your website and ask it to help you update the Supabase Edge Function.

    You can use this prompt:

    ```
    I want to configure Resend for my website. Please help me update the Supabase Edge Function to send reservation confirmation emails.
    ```
  </Step>

  <Step title="Step 5: Add Resend API Key to Supabase">
    After Readdy AI updates the Edge Function, you need to manually add your Resend API key to Supabase Secrets.

    Follow these steps:

    1. Open your project in the [Supabase Dashboard](https://supabase.com/dashboard)
    2. Navigate to **Edge Functions** in the left sidebar
    3. Click **Secrets** to manage environment variables
    4. In the **Name** field, enter: `RESEND_API_KEY`
    5. In the **Value** field, paste your Resend API key from Step 3
    6. Click **Save** to save the secret

    <Frame>
      <img alt="Supabase Edge Functions Secrets" />
    </Frame>

    <Warning>
      Make sure to enter `RESEND_API_KEY` in all caps. The name must match exactly what's in the Edge Function code, otherwise the function won't be able to access your API key.
    </Warning>
  </Step>
</Steps>

## 2. Testing and Verification

After connecting Resend, you'll need to test the email sending functionality to verify everything is working correctly.

<Steps>
  <Step title="Step 1: Test Email Sending">
    In the preview interface, trigger an email send (e.g., fill out and submit a form that sends an email) to verify email sending works correctly.
  </Step>

  <Step title="Step 2: Verify Email Delivery">
    Check your email inbox to confirm you received the test email.

    <Info>
      The email will be sent from Resend's default domain `@resend.dev`. Later, you can configure a custom domain to send emails from your own domain (e.g., `noreply@yourdomain.com`).
    </Info>
  </Step>

  <Step title="Step 3: Check Database Records (Optional)">
    If your email trigger involves storing data (e.g., form submissions), check your Supabase dashboard to verify that the records were successfully stored in the database.

    <Tip>
      You can ask Readdy AI to help set up database storage for your form submissions.

      If you're using Supabase to store form data, each submission should create a corresponding record with all the user-submitted information. You can export this data later for analysis or follow-up.
    </Tip>

    <Success>
      If you've confirmed email delivery (and database records if applicable), your email system is fully operational!
    </Success>
  </Step>
</Steps>

## 3. Branding Setup

To send emails from your own domain (e.g., `reservation@yourdomain.com`) instead of Resend's default domain (`@resend.dev`), you'll need to verify your domain with Resend.

Choose the scenario that matches your situation:

<Accordion title="I Already Have a Domain">
  If you already own a domain (e.g., from GoDaddy, Cloudflare, or another provider), follow these steps to configure it for Resend:

  <Steps>
    <Step title="Step 1: Add Your Domain in Resend">
      In your Resend dashboard, go to **Domains** and click **Add Domain**.

      Enter your existing domain name and click **Add**.

      <Frame>
        <img alt="Add domain in Resend" />
      </Frame>
    </Step>

    <Step title="Step 2: Copy DNS Records from Resend">
      Resend will display the DNS records you need to configure. Copy these records.

      You'll need to add the following records:

      * **MX records** (2) for email sending and receiving
      * **TXT record** for SPF authentication
      * **TXT record** for DKIM authentication
      * **TXT record** for DMARC (optional)
    </Step>

    <Step title="Step 3: Configure DNS at Your Domain Provider">
      Log in to your domain provider account and navigate to **DNS Management** for your domain.

      Add the following DNS records from Resend:

      <table>
        <thead>
          <tr>
            <th><div>Type</div></th>
            <th><div>Name</div></th>
            <th><div>Value</div></th>
            <th><div>Priority</div></th>
            <th><div>Purpose</div></th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td><b>MX</b></td>
            <td><code>send</code></td>
            <td><code>feedback-smtp.us-east-1.amazonses.com</code></td>
            <td><code>10</code></td>
            <td>Enable Sending</td>
          </tr>

          <tr>
            <td><b>MX</b></td>
            <td><code>@</code></td>
            <td><code>inbound-smtp.us-east-1.amazonses.com</code></td>
            <td><code>10</code></td>
            <td>Enable Receiving</td>
          </tr>

          <tr>
            <td><b>TXT</b></td>
            <td><code>send</code></td>
            <td><code>v=spf1 include:amazonses.com \~all</code></td>
            <td><code>-</code></td>
            <td>SPF Authentication</td>
          </tr>

          <tr>
            <td><b>TXT</b></td>
            <td><code>resend.\_domainkey</code></td>
            <td><code>p=your-dkim-key-value</code></td>
            <td><code>-</code></td>
            <td>DKIM Authentication</td>
          </tr>

          <tr>
            <td><b>TXT</b></td>
            <td><code>\_dmarc</code></td>
            <td><code>v=DMARC1; p=none;</code></td>
            <td><code>-</code></td>
            <td>DMARC (Optional)</td>
          </tr>
        </tbody>
      </table>

      <Warning>
        The actual values will be different in your Resend dashboard. Always copy the exact values from Resend, not from this documentation.
      </Warning>

      <Tip>
        DNS configuration steps are similar across most domain providers. Refer to your provider's help documentation if you need specific guidance.
      </Tip>
    </Step>

    <Step title="Step 4: Verify Domain in Resend">
      Return to Resend and click **Verify Domain**.

      <Info>
        DNS propagation typically takes 5-30 minutes, but can take up to 48 hours in some cases. If verification doesn't work immediately, wait a few minutes and try again.
      </Info>

      Once verified, you can now send emails from your custom domain.
    </Step>

    <Step title="Step 5: Update Email Sender in Readdy">
      Tell Readdy to update the email sender address to use your verified custom domain:

      ```
      Update the email sender to use noreply@yourdomain.com
      ```

      <Tip>
        Replace `yourdomain.com` with your actual verified domain name.
      </Tip>
    </Step>
  </Steps>
</Accordion>

<Accordion title="I Don't Have a Domain">
  If you don't have a domain yet, we recommend purchasing one first. You can buy a domain from a domain provider like GoDaddy, Cloudflare, or Namecheap, then **follow the steps in "I Already Have a Domain" above**.

  Alternatively, you can purchase your domain directly through Readdy and use it for both your website and email branding:

  <Steps>
    <Step title="Step 1: Purchase Domain in Readdy">
      In your Readdy project, click **Publish** and select **Purchase a new domain**.

      <Frame>
        <img alt="Purchase domain in Readdy" />
      </Frame>

      📖 **Learn More**: <a href="/features/publish-purchase-domain">Complete Guide to Purchasing Domains in Readdy</a>
    </Step>

    <Step title="Step 2: Add Domain in Resend">
      After purchasing, **follow the steps in "I Already Have a Domain" above**:

      * Add your domain in Resend dashboard
      * Copy the DNS records provided by Resend (MX x2, TXT SPF, TXT DKIM, TXT DMARC)
    </Step>

    <Step title="Step 3: Configure DNS Records">
      Since your domain is managed by Readdy, you can configure DNS records through your Readdy project settings.

      Add the following records provided by Resend:

      * **MX records** (2) for email sending and receiving
      * **TXT record** for SPF authentication
      * **TXT record** for DKIM authentication
      * **TXT record** for DMARC (optional)
    </Step>

    <Step title="Step 4: Verify and Update">
      * Verify your domain in Resend (wait 5-30 minutes for DNS propagation)
      * Tell Readdy to update the email sender to use your custom domain

      <Tip>
        This method is more streamlined as both your website and email use the same domain management system.
      </Tip>
    </Step>
  </Steps>
</Accordion>

<Success>
  After connecting your domain to your website, you can proceed with testing. You'll then see that the email sender displays your configured branded name (e.g., "Pinzo Restaurant \<[reservation@yourdomain.com](mailto:reservation@yourdomain.com)>") in the email header.
</Success>

## Troubleshooting

### Email Not Sending

If emails are not being sent:

1. **Check your Resend API key** - Ensure it's valid and hasn't been revoked
2. **Verify domain status** - If using a custom domain, make sure it's verified
3. **Check Supabase connection** - Ensure database is properly connected
4. **Review Resend logs** - Check your Resend dashboard for error messages

### Email Not Arriving

If the API call succeeds but emails don't arrive:

1. **Check spam folder** - The email might be in the recipient's spam folder
2. **Verify email address** - Ensure the recipient email address is correct
3. **Check sending limits** - Verify you haven't exceeded your Resend quota
4. **Review DNS settings** - If using a custom domain, ensure DNS records are correct

### Database Not Recording Bookings

If booking data isn't being saved, ask **Readdy AI** to help check the database configuration and set up data storage for you.

## Need Help?

### Contact Support

* **Ask AI**: Available in your project
* **Readdy Support**: <a href="https://readdy.ai/feedback">Submit a support ticket</a>

Thank you for using Readdy and Resend. Happy sending! 📧


# Integrate with Shopify
Source: https://docs.readdy.ai/integrations/shopify

Connect your Shopify store to your Readdy website and sell products directly on your site

## 1. What is Shopify?

Shopify is a leading global e-commerce platform that provides businesses and individuals with a complete solution for creating and managing online stores. You can connect your Shopify account to Readdy's project, enabling you to sell the Shopify products on your Readdy-generated websites.

## 2. Before You Start

You need to connect to **Supabase** before setting up Shopify integration.

In the Readdy editor, click the **Connects** button at the top of the screen.

<Frame>
  <img alt="Connects button in the top navigation bar" />
</Frame>

From the Connects panel, find **Supabase** and click **Connect** to set it up first.

<Frame>
  <img alt="Supabase in the Connects panel" />
</Frame>

For detailed instructions, see [How to connect Supabase](/integrations/supabase).

## 3. Access the Shopify Integration

Once Supabase is connected, open **Connects** again and select **Shopify**.

<Frame>
  <img alt="Shopify in the Connects panel" />
</Frame>

After opening the Shopify panel, you'll see three fields to fill in: **Store Domain**, **Client ID**, and **Secret Key**.

> Store connection is a one-time setup — you won't need to enter these credentials again for future use of this feature.

<Frame>
  <img />
</Frame>

The following steps will guide you through obtaining each of these three values from your Shopify account.

## 4. Get Your Store Domain

Visit [https://www.shopify.com/](https://www.shopify.com/), log in to your Shopify account, and switch to the store you want to connect.

Click "**Settings**" in the bottom-left corner of the page.

<div>
  <Frame>
    <img />
  </Frame>
</div>

Click "**Domains**" in the left sidebar. On the right side, you'll see your store's domain.

* Copy and save the **default Shopify domain** (the one ending in `.myshopify.com`).
* Do **not** use your own custom domain.

<Frame>
  <img />
</Frame>

> Save the domain for later — you'll enter it in Readdy at the final step.

## 5. Create a Shopify App

Click "**Apps**" in the left sidebar, then click "**Develop apps**".

<Frame>
  <img />
</Frame>

Click the black button shown below to navigate to the **Shopify Developer Dashboard**.

<Frame>
  <img />
</Frame>

Then click "**Create app**" in the Developer Dashboard.

<Frame>
  <img />
</Frame>

Enter a name for your app, then click "**Create**".

> The name can be anything you prefer — just choose something you'll recognize easily.

<Frame>
  <img />
</Frame>

## 6. Configure API Scopes

After the app is created, click "**Select scopes**" to configure the API permissions.

<div>
  <Frame>
    <img />
  </Frame>
</div>

In the scopes selection popup, search for and enable the following **Storefront API** permissions (do not select Admin API):

**Search "checkout"** and select:

* `unauthenticated_white_checkouts`

<Frame>
  <img />
</Frame>

**Search "product"** and select:

* `unauthenticated_read_product_pickup_locations`
* `unauthenticated_read_product_inventory`
* `unauthenticated_read_product_listings`
* `unauthenticated_read_product_tags`

<Frame>
  <img />
</Frame>

**Search "selling"** and select:

* `unauthenticated_read_selling_plans`

<Frame>
  <img />
</Frame>

Click "**Done**" to save the scopes.

Next, you need to release a version of your app. Click "**Release**".

<Frame>
  <img />
</Frame>

Confirm the release in the popup.

<Frame>
  <img />
</Frame>

## 7. Get Client ID and Secret

After the release, go to the app's **Settings** page in the Developer Dashboard. You'll find your **Client ID** and **Client secret** displayed here. **Copy and save both values.**

<Frame>
  <img />
</Frame>

## 8. Install the App

Go back to the Developer Dashboard **My app** page and click "**Install app**".

<Frame>
  <img />
</Frame>

You'll be redirected to your store's homepage. Select your store to proceed.

<Frame>
  <img />
</Frame>

Review the permissions and click "**Install**".

<Frame>
  <img />
</Frame>

Once the installation is complete, you'll see a success confirmation.

<Frame>
  <img />
</Frame>

## 9. Connect Your Store in Readdy

Go back to Readdy's Shopify panel. Enter the **Store Domain** you saved earlier.

<Frame>
  <img />
</Frame>

Enter the **Client ID** and **Secret Key** you copied from the Developer Dashboard, then click "**Connect**".

<Frame>
  <img />
</Frame>

## 10. Connect Products to Your Website

Once the connection is established, follow the on-screen instructions to select the product section on the page displayed on the left.

<Tip>
  We recommend selecting the **entire product section** instead of individual elements like a single piece of text, one image, or other minor components within the product information.
</Tip>

Once you've made your selection, click "**Start to Connect Products**".

<Frame>
  <img />
</Frame>

Within the panel, select the products you want to connect, then click "**Connect x Products**".

<Frame>
  <img />
</Frame>

Wait briefly for the AI to connect your selected products to the page. After successful connection, when you edit the product information in Shopify (including product names, images, etc.), it will automatically sync to your Readdy page. Note that you'll need to refresh the page to see the updated information.

<Frame>
  <img />
</Frame>

## 11. Connect to Shopify Checkout

Once product connection is successful, you must establish the corresponding payment workflow to enable customer purchases on your website. Please follow these recommended procedures:

1. Begin by implementing the shopping cart functionality within your web project, ensuring all features operate correctly including: adding products to cart, removing cart items, enforcing stock quantity limits, accurate price calculations, and other essential cart operations.

2. Within the shopping cart interface, instruct the AI by saying "When the payment button is clicked, connect to my Shopify payment page." The AI will then generate the appropriate payment integration functionality.

3. Upon completion of the payment setup, thoroughly test the entire payment workflow to verify that products can be purchased without issues.

## 12. Tips

**Best Practices for Improving Product Connection Success:**

* **Proper Area Selection:** When selecting regions for product connection, choose complete product sections rather than individual elements such as isolated text, images, or buttons
* **Quantity Alignment:** Ensure the number of selected products matches the actual product count displayed on the page. To adjust quantities, first request the AI to modify the page display, then proceed with connection

**Troubleshooting Common Issues:**

* **Mock data persistence:** Use "Delete the mock data in the xxx area, keep the Shopify-connected data"
* **Incorrect product ordering:** Use "The product display order in the xxx area should be: ..."
* **Unwanted additional products:** Use "Remove the xxx product from the xxx area, keep the xxx product"
* **Missing product attributes:** Use "The page is missing the xxx attribute, connect the product's xxx attribute"
* **Shopify-pay page cannot be accessed:** Shopify payment pages cannot be accessed directly from Readdy's editor. Please use your project's share link to open the project, or publish your website first and visit your domain — the payment process will work correctly there.

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Integrate with Stripe
Source: https://docs.readdy.ai/integrations/stripe

Sell the products on your website with conncet Stripe

## 1. What is Stripe?

Stripe is a leading global payment processing platform that provides businesses and individuals with a complete solution for accepting and managing online payments. You can integrate your Stripe account into your e-commerce websites, enabling you to securely process credit cards, digital wallets, and various payment methods from customers worldwide.

Once you've set up Stripe integration, you can start accepting real-time payments on your website so that customers can complete transactions seamlessly. This guide will walk you through the steps to implement Stripe payments on your website.

## 2. Before You Start

This guide will walk you through connecting Stripe to your Readdy project. Before we begin, please make sure you have the following ready:

* An active Stripe account ready for payments.
* Your Readdy project is already connected to **Supabase** (Stripe integration requires Supabase [How to connect Supabase](/integrations/supabase)).

Once these are ready, let’s connect Stripe.

## 3. Access the Stripe Integration

In the Readdy editor, click the **Connects** button at the top of the screen.

<Frame>
  <img alt="Connects button in the top navigation bar" />
</Frame>

From the Connects panel, find **Stripe** and click **Connect**.

<Frame>
  <img alt="Stripe in the Connects panel" />
</Frame>

A panel will open where you’ll need to enter your Stripe API key.

> API connection is a one-time setup - you won't need to enter the API again for future use of this feature.

<Frame>
  <img alt="" />
</Frame>

## 4. Get Stripe API

Go to [https://www.stripe.com/](https://www.stripe.com/) and log in. Then, in the left menu, click **Developers** and select **API keys**.

<Frame>
  <img alt="" />
</Frame>

Click **+ Create restricted key**.

<Frame>
  <img alt="" />
</Frame>

In the panel, choose **Building your own integration** and click **Continue**.

<Frame>
  <img alt="" />
</Frame>

Enter the key name: **STRIPE\_SECRET\_KEY**.

> case-sensitive, use underscores, no spaces

<Frame>
  <img alt="" />
</Frame>

Assign permissions as follows:

<Tip>
  **For security and proper functionality, strictly follow the permissions below.**

  <table>
    <thead>
      <tr>
        <th><div><font>Resource Type</font></div></th>
        <th><div><font>Permissions</font></div></th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td><font><b>Charges and Refunds</b></font></td>
        <td><font><b>Read</b></font></td>
      </tr>

      <tr>
        <td><font><b>Customers</b></font></td>
        <td><font><b>Write</b></font></td>
      </tr>

      <tr>
        <td><font><b>Payment Intents</b></font></td>
        <td><font><b>Read</b></font></td>
      </tr>

      <tr>
        <td><font><b>Products</b></font></td>
        <td><font><b>Write</b></font></td>
      </tr>

      <tr>
        <td><font><b>Shipping Rates</b></font></td>
        <td><font><b>Write</b></font></td>
      </tr>

      <tr>
        <td><font><b>Coupons</b></font></td>
        <td><font><b>Write</b></font></td>
      </tr>

      <tr>
        <td><font><b>Invoices</b></font></td>
        <td><font><b>Write</b></font></td>
      </tr>

      <tr>
        <td><font><b>Prices</b></font></td>
        <td><font><b>Write</b></font></td>
      </tr>

      <tr>
        <td><font><b>Promotion Codes</b></font></td>
        <td><font><b>Write</b></font></td>
      </tr>

      <tr>
        <td><font><b>Subscriptions</b></font></td>
        <td><font><b>Write</b></font></td>
      </tr>

      <tr>
        <td><font><b>Tax Rates</b></font></td>
        <td><font><b>Write</b></font></td>
      </tr>

      <tr>
        <td><font><b>Checkout Sessions</b></font></td>
        <td><font><b>Write</b></font></td>
      </tr>

      <tr>
        <td><font><b>Orders</b></font></td>
        <td><font><b>Write</b></font></td>
      </tr>

      <tr>
        <td><font><b>SKUs</b></font></td>
        <td><font><b>Read</b></font></td>
      </tr>

      <tr>
        <td><font><b>Webhook Endpoints</b></font></td>
        <td><font><b>Write</b></font></td>
      </tr>
    </tbody>
  </table>
</Tip>

After configuring, click **Create key** at the bottom of the page to generate your API key.

<Frame>
  <img alt="" />
</Frame>

Once created, you have got the API key (rk\_live\_...).

<Frame>
  <img alt="" />
</Frame>

**Please save and store this key to a secure place**, such as a password manager or secret store. You won't be able to see it again. Then return to Readdy to proceed with the integration.

## 5. Connect Your Stripe

In the Stripe panel, paste your API key and click **Connect**.

<Frame>
  <img alt="" />
</Frame>

Once connected, the panel will close, and Readdy shows that Stripe is connected. You can now describe your payment requirements to the AI.

* Example: Select a product and tell the AI: "Use Stripe to process payment when this product is purchased."
* Tip: For best results, use only Stripe or Shopify per page—mixing them may reduce AI code generation quality.

<Frame>
  <img alt="" />
</Frame>

When you reopen the Stripe feature, you'll see a “Connected” label—this means your Stripe account is now linked to the project. If you need to switch your API key (e.g., when changing to a different Stripe account), click **Change API**. Please note: Updating the API key will invalidate any products previously connected to Stripe on this page. This may cause unexpected issues, so proceed with caution.

<Frame>
  <img alt="" />
</Frame>

<Tip>
  Tips for Using Stripe Integration

  * After connecting your Stripe API key, you can describe your payment requirements directly to the AI.
  * To ensure optimal results, use clear and concise instructions. For example:
    * "Connect the products on the page to Stripe so users can complete payment via Stripe when clicking the purchase button."
    * "Import the products from the page into Stripe and create matching products in Stripe."
    * "I’ve already created products in Stripe, import them into the XX section on the page."
  * Before publishing your project, ensure your products are properly connected to Stripe and all product information displays correctly.
  * Stripe payment pages cannot be accessed directly from Readdy's editor. Please publish your website first, and the payment process will work on your online website.
</Tip>

***

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Integrate with Supabase
Source: https://docs.readdy.ai/integrations/supabase

Connect your Readdy website with Supabase for user authentication, database management, and backend services integration

## Supabase Overview

### What is Supabase?

[Supabase](https://supabase.com) is a powerful and user-friendly Backend-as-a-Service platform built on PostgreSQL. It provides developers with a complete suite of backend tools needed for modern application development, including:

* 🌐 Database (PostgreSQL) - Powerful relational database with real-time data synchronization
* 🔐 Authentication - Complete user login and registration system supporting multiple login methods
* 🗂️ Storage - Secure file storage service for managing images, documents, and other resources
* ⚡ Edge Functions - Serverless cloud functions for handling complex backend logic

### Integrating Supabase with Readdy

Once you connect Supabase to your Readdy project, you can add Database, Authentication, Storage, and Edge Functions to your projects. Zero coding needed - Readdy executes automatically.

### Supabase Pricing

Supabase offers a **generous free tier** that's sufficient for prototyping and small to medium projects. If you need more powerful features or resources in the future, you can upgrade to the corresponding paid plans in Supabase.

At this stage, you can experience the Supabase and Readdy integration at **zero cost**!

## Authorization

Connecting Supabase with Readdy requires just a simple click. Since Supabase is a separate platform, you'll need a Supabase account. Don't worry - Readdy will guide you through the entire process. Supabase offers a free tier, so you can add it to your project at no cost initially.

### Step 1: Connect

In Readdy, click the **Connects** button at the top, then select **Supabase**.

<Frame>
  <img alt="Connects button in the top navigation bar" />
</Frame>

<Frame>
  <img alt="Supabase in the Connects panel" />
</Frame>

When you need Supabase services, the AI will provide relevant prompts, and you can click the connection button in the conversation to proceed.

<Frame>
  <img alt="Navigate to Supabase integration in the chat" />
</Frame>

### Step 2: Configure

If you haven't logged into your Supabase account, please sign in or register first.

<Frame>
  <img />
</Frame>

Once complete, Supabase will prompt for Readdy authorization. Next, you'll select a Supabase organization to connect with Readdy.

<Frame>
  <img />
</Frame>

Upon successful authorization, Readdy will automatically redirect you back to the Readdy application. You'll need to select or create a new project to match your Readdy project.

* Click **"Connect"** to connect the project

<Frame>
  <img />
</Frame>

* When creating a new project, you'll first need to select a region. Choose one closest to your user base for optimal performance.

<Frame>
  <img />
</Frame>

Once connected successfully, Readdy will automatically send a confirmation message "Supabase is all set in my project." to complete the project configuration and handle connection operations.

## Building with Supabase

Integrating Supabase with Readdy is incredibly simple. Here are specific examples of integrating Supabase functionality into your project.

### User Login

#### Email/Password

After connecting Supabase to your Readdy project, you can directly add Supabase's authentication system to your project through conversation.

**Example prompt:**

```
Add login and registration functionality using Supabase authentication system
```

**Results:**

* **In your app**: After executing the above prompt, a login/registration page will be generated in your Readdy project for user authentication operations.
* **Supabase user table**: In your Supabase project dashboard, you can find **Authentication** > **Users** to view all registered users.

<Frame>
  <img />
</Frame>

<Note>
  In Supabase, you can also configure whether registered users need email verification. The setting page is in **Authentication** > **Sign In / Providers**, select **Auth Providers** > **Email**. During development and testing, you can disable **"Confirm email"** for more testing, but it's recommended to enable this setting before production release to ensure user authenticity.

  <Frame>
    <video />
  </Frame>

  Before publishing your website, you need to configure Redirect URLs in Supabase's **Authentication** > **URL Configuration**. The format should be: https\://\*.yourdomain.com/\*\*, where \*.yourdomain is the domain name you fill in when publishing your website.

  <Frame>
    <img />
  </Frame>

  When testing before publishing your website, the "Confirm your mail" link in emails may redirect abnormally, but it will work normally after your website is published.
</Note>

#### Third-Party Login

Supabase also provides social media login/registration options, such as Google, Twitter, and Apple.

1. **Enable login methods in Supabase**: In **Sign In / Providers** > **Auth Providers**, enable the required providers. Follow Supabase's guidance to configure and save the necessary information.

<Frame>
  <img />
</Frame>

2. **Add login methods in Readdy project**: After completing the above configuration, you can add corresponding login methods through conversation. For example:

```
Add Google login to the login/registration page using Supabase integration.
```

After completing these steps, your app will support Google login, redirecting to Google for verification and then returning to your application.

[Learn how to build Google Sign-in from scratch.](/integrations/google-login)

### Database

In your product, besides login/registration, database reading and writing might also be necessary. For example:

* Saving user contact information to database tables.
* Dynamically retrieving product information from database tables.

1. **Create data tables in Readdy**: You can create data tables and product tools through conversation. For example:

```
Add a contact information form and save the information to a database table.
```

2. **Automatic implementation**: After receiving the request, Readdy will automatically implement the related UI and logic, generate database operation SQL, and automatically sync to Supabase for table creation and modification operations.

<Note>
  SQL is automatically generated by AI. To avoid dangerous operations from AI errors, the SQL will block dangerous operations like deleting tables/fields or clearing tables. If you need to delete tables or fields, you can do so in Supabase’s Table Editor.
</Note>

After completion, you can submit data in your product and check if it's correctly saved in Supabase's Table Editor.

<Warning>
  **Row Security Policy Check**: **Before launching your product, make sure to check the row security policies of your data tables.** Row security policies define which users can read and write each row of data in the database.
  When generating, Readdy AI will also create relatively secure row security policy requirements. However, for greater security, please make sure to check in Supabase's Authentication > Policies before release.

  <Frame>
    <img />
  </Frame>
</Warning>

### Edge Functions

In some product logic, you might need backend logic to help complete your product. For example:

* **Stripe payments**: Process subscription payments, one-time purchases, and refunds
* **AI service integration**: Generate content, analyze images, or provide chatbot functionality
* **Complex processing logic**: Calculate pricing, process bulk data, or generate reports
* **Third-party integrations**: Send emails, SMS notifications, or sync with CRM systems

You can add these functionalities through conversation in Readdy, and the system will automatically generate and deploy the necessary edge functions to Supabase. For example:

```
Add an AI chatbot feature using Supabase Edge Functions to connect with OpenAI's GPT-4o API
```

<Warning>
  For API keys used in functions, make sure to save them securely in **Edge Functions** > **Secrets** in the Supabase dashboard to ensure key security. **Do not directly input keys to AI in conversations.**

  <Frame>
    <img />
  </Frame>
</Warning>

### File Storage

Supabase provides 1GB of file storage space for storing images, PDFs, and other files. For example, if your application needs users to upload avatars or files.

You can add a file upload component through conversation in Readdy, which will upload files to Supabase Storage.

Your product pages will also use these file links for display.

## Switch or Remove a Supabase Account Connection

<Note>
  Unless necessary, we generally do not recommend switching Supabase accounts. After switching, you will usually need to re-check project bindings, authentication, database, Storage, Edge Functions, and related integrations, which can take additional time to verify.
</Note>

Readdy currently does not support disconnecting a Supabase account directly inside a project.

If you want to stop using the current Supabase account with Readdy, or switch to another Supabase account, you must first remove the authorized **Readdy** app from the current account in **Supabase**, then reconnect.

### When You Might Need This

* You want to connect the current Readdy project to a different Supabase account
* The current Supabase authorization was granted to the wrong account and needs to be redone
* The current Readdy project is connected to the wrong Supabase project
* Account ownership has changed and a new Supabase admin account should be used

### Steps

If you want to switch to another Supabase account, or stop using the current one with Readdy, follow these steps:

<Steps>
  <Step title="Step 1: Remove the Readdy app in Supabase">
    First, sign in to the Supabase account that is currently connected. You can access it here: [Supabase Dashboard](https://supabase.com/dashboard)

    Go to **Settings** > **OAuth Apps** > **Authorized apps**, find the authorized **Readdy** app, and remove it.

    If you plan to switch to another Supabase account, complete this step first, then sign out and sign in to the target account.

    <Frame>
      <img alt="Authorized Readdy app in the Supabase OAuth Apps page" />
    </Frame>
  </Step>

  <Step title="Step 2: Return to Readdy and reconnect">
    After removing the app, return to Readdy, refresh the current page, then click **Connect Supabase** to start the connection flow again.

    <Note>
      If Readdy does not immediately show the reconnect state after you return, refreshing the page usually fixes it.
    </Note>

    <Frame>
      <img alt="Reconnect Supabase in Readdy" />
    </Frame>
  </Step>

  <Step title="Step 3: Choose an organization and authorize">
    On the Supabase authorization page, select the **Organization** you want to authorize, then click **Authorize Readdy**.

    <Frame>
      <img alt="Select an organization and authorize Readdy in Supabase" />
    </Frame>
  </Step>

  <Step title="Step 4: Choose a project or create a new one">
    After returning to Readdy, choose the **Project** you want to connect. If you do not have an existing project yet, you can create a new one here.

    <Frame>
      <img alt="Choose a Supabase project or create a new one in Readdy" />
    </Frame>
  </Step>
</Steps>

<Note>
  Simply signing out of Supabase in the browser and switching to another account is usually not enough to trigger the full reconnection flow in Readdy. You need to first remove the authorized **Readdy** app from the original Supabase account.
</Note>

<Note>
  The Supabase dashboard UI may change over time. Please use the actual labels and navigation shown in your Supabase account if they differ slightly from this guide.
</Note>

### Important Notes

* After switching accounts or removing authorization, any Readdy features that depend on Supabase may be affected, including user sign-in / sign-up, database reads and writes, form submissions, file uploads to Supabase Storage, Edge Functions, and integrations that rely on Supabase, such as Stripe, PayPal, and Resend.
* Switching accounts or removing authorization will not automatically delete existing database tables, auth users, Storage files, Edge Functions, or Secrets in Supabase.
* If you reconnect to a different Supabase project, existing data and configuration will not be migrated automatically. Please verify the migration status yourself.
* After reconnecting, we recommend checking Redirect URLs, Auth Providers, RLS Policies, Storage Buckets, Edge Functions, and Secrets again to make sure everything is configured correctly.
* Under the current credit rules, authorizing a Supabase account itself does not consume credits. However, connecting or switching a specific Supabase project may consume credits.


# Integrate with Toss Payments
Source: https://docs.readdy.ai/integrations/toss-payments

Accept one-time KRW payments with Korean local payment methods on your Readdy website

Toss Payments is a Korean payment service provider that helps businesses accept credit cards, bank transfers, virtual accounts, and local digital wallets. You can connect your Toss Payments merchant account to a Readdy project and ask AI to add a secure payment flow to your website.

Once connected, Readdy can generate a Toss Payments Payment Widget for one-time payments in Korean won (KRW), confirm completed payments securely, and update the corresponding order in your connected database.

<Frame>
  <img alt="Toss Payments integration announcement and payment widget" />
</Frame>

## Before You Start

This guide will walk you through connecting Toss Payments to your Readdy project. Before you begin, make sure you have the following ready:

* An active Toss Payments merchant account.

* An approved electronic payment services application. You can apply through [**Apply for Electronic Payments**](https://onboarding.tosspayments.com/registration/business-registration-number) in Toss Payments. Your application must be approved before you can accept live payments.

* A Readdy project connected to [Readdy Backend](/features/backend) or [Supabase](/integrations/supabase).

Once these are ready, let's connect Toss Payments.

## Get Your Toss Payments Keys

<Steps>
  <Step title="Open the Toss Payments Developer Center">
    Go to the [Toss Payments Developer Center](https://developers.tosspayments.com/), log in to your merchant account, and open **"API Keys"**.

    <Frame>
      <img alt="API Keys page in the Toss Payments Developer Center" />
    </Frame>
  </Step>

  <Step title="Choose the Environment">
    Select the **"Test"** or **"Live"** environment at the top of the page.

    <Info>
      Test payments simulate authorization and do not charge the payment method, even when you enter real payment information.
    </Info>

    <Frame>
      <img alt="Test and live environment switcher in the Toss Payments Developer Center" />
    </Frame>
  </Step>

  <Step title="Copy the Payment Widget Keys">
    Find **Payment Widget integration keys** (`결제위젯 연동 키`), then copy the Client Key and Secret Key from the same key pair.

    <Frame>
      <img alt="Payment Widget Client Key and Secret Key in the Toss Payments Developer Center" />
    </Frame>
  </Step>
</Steps>

<Info>
  You can view your Payment Widget integration keys only after applying for Toss Payments electronic payment services. Even test keys require an application. Before applying, you can use the following public test pair:

  `clientKey = 'test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm'`

  `secretKey = 'test_gsk_docs_OaPz8L5KdmQXkzRz3y47BMw6'`
</Info>

<Warning>
  Do not use **individual API integration keys** (`API 개별 연동 키`). Keys beginning with `test_ck_`, `test_sk_`, `live_ck_`, or `live_sk_` are not supported by Readdy's current Payment Widget integration.
</Warning>

Keys in different environments have different prefixes

|                   | Test key prefix | Live key prefix |
| ----------------- | --------------- | --------------- |
| Widget Client Key | `test_gck_`     | `live_gck_`     |
| Widget Secret Key | `test_gsk_`     | `live_gsk_`     |

<Note>
  The Client Key and Secret Key must:

  * Come from the same merchant ID.

  * Belong to the same Payment Widget key pair.

  * Both be test keys or both be live keys.
</Note>

You can use a matching test pair while building and testing your website. Test payments do not create a real charge. Use a matching live pair when your Toss Payments contract and website are ready to accept real payments.

For more information about the keys and Payment Widget, see the [official Toss Payments Payment Widget guide](https://docs.tosspayments.com/guides/v2/payment-widget/integration).

## Connect Toss Payments in Readdy

<Steps>
  <Step title="Open the Connects Panel">
    In the Readdy editor, click **"Connects"** at the top of the screen.

    <Frame>
      <img alt="Connects button at the top of the Readdy editor" />
    </Frame>
  </Step>

  <Step title="Select Toss Payments">
    Find **Toss Payments** in the Connects panel, then click **"Connect"**.

    <Frame>
      <img alt="Toss Payments integration in the Connects panel" />
    </Frame>

    <Info>
      If your project does not have a connected database, Readdy asks you to connect **Readdy Backend** or **Supabase** first. Toss Payments uses the connected backend to create orders, keep the Secret Key secure, and confirm payments.
    </Info>
  </Step>

  <Step title="Enter Your Integration Keys">
    Paste the matching **Widget Client Key** and **Widget Secret Key**, then click **"Connect"**.

    <Frame>
      <img alt="Widget Client Key and Widget Secret Key fields in Readdy" />
    </Frame>
  </Step>

  <Step title="Confirm the Connection">
    Check that the panel displays **"Connected"** and masks both keys.

    <Frame>
      <img alt="Toss Payments connected in Readdy with masked keys" />
    </Frame>
  </Step>

  <Step title="Ask Readdy to Add the Payment Flow">
    Ask Readdy AI to add a Toss Payments checkout flow to the products, cart, or checkout button on your website.

    <Frame>
      <img alt="Example website with a Toss Payments checkout flow" />
    </Frame>
  </Step>
</Steps>

## Best Practices

* Tell Readdy AI which products, cart, or checkout button should use Toss Payments.

* Use positive whole-won prices. Toss Payments currently supports one-time KRW payments in Readdy.

* Review your Toss Payments contract and Payment Widget settings to confirm which payment methods customers can use.

* Test the complete flow through your website's share link or published URL before accepting live payments.

<Warning>
  Readdy acts only as a platform that provides the Toss Payments integration and does not participate in payment processing. You receive funds directly through your Toss Payments account; Readdy does not hold these funds. Before going live, complete an end-to-end test and verify payment amounts and order statuses. If the records differ, check Toss Payments before fulfilling or refunding the order.
</Warning>

## FAQ

<AccordionGroup>
  <Accordion title="Why can't I see Toss Payments in Connects?">
    Toss Payments is currently available to eligible accounts. Make sure you are signed in to the correct Readdy account. If the integration is still missing, [submit a support ticket](https://readdy.ai/feedback) to request access.
  </Accordion>

  <Accordion title="Why does Readdy reject my keys?">
    Make sure you copied **Payment Widget integration keys** (`결제위젯 연동 키`), not individual API integration keys. The Client Key must use a `test_gck_` or `live_gck_` prefix, the Secret Key must use the matching `test_gsk_` or `live_gsk_` prefix, and both keys must come from the same merchant ID.
  </Accordion>

  <Accordion title="Why do I need to connect a database first?">
    Readdy uses the connected backend to validate order amounts, create orders, protect your Secret Key, confirm payments with Toss Payments, and update the order only after payment succeeds.
  </Accordion>

  <Accordion title="Which payment methods will customers see?">
    Customers see the methods enabled in your Toss Payments contract and Payment Widget settings. If a payment method is missing, review your contract and [Widget configuration in Toss Payments](https://docs.tosspayments.com/guides/v2/payment-widget/admin).
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Intro to Readdy
Source: https://docs.readdy.ai/intro

AI-powered website builder. Create professional websites without coding.

# Welcome to Readdy

Readdy is an AI-powered website builder. Describe what you want, and our AI creates a professional website for you. No coding required.

<Frame>
  <iframe title="YouTube video player" />
</Frame>

## How It Works

1. **Describe your website** - Tell us what you want to build
2. **AI generates your site** - Get a complete website in minutes
3. **Edit and customize** - Make changes with simple tools
4. **Publish online** - Go live with your domain

## What You Can Build

* Business websites
* Online portfolios
* Landing pages
* Blogs and content sites
* E-commerce stores

## Key Features

* AI website generation
* Visual editing tools
* Professional templates
* Contact forms and payments
* Custom domains and hosting

## Start Building Today

<Card title="Create Your First Website" href="/firstapp">
  Tell us what you want to build, and watch your ideas come to life in minutes **→**
</Card>


# Readdy V2.0
Source: https://docs.readdy.ai/more/readdy-v2

Build smarter with React-based projects and shared components

# What's New in Readdy V2.0

Readdy V2.0 introduces **project-based website generation** with React — a major leap from V1.0. Build smarter, faster, and more consistently.

<Frame>
  <img alt="Readdy 2.0 Project Dashboard" />
</Frame>

## Project-Based Architecture

Readdy 2.0 creates **complete React projects** where all pages share common components.

**Key Benefits:**

* **Shared Components**: Navigation bars, footers, and UI elements stay consistent across all pages
* **Global Updates**: Change once, apply everywhere — no more manually updating each page
* **Context-Aware Generation**: New pages are created with your entire project's style and structure in mind
* **Intelligent Error Handling**: Automatic detection and fixing of common issues during generation

## V2.0 vs V1.0

<AccordionGroup>
  <Accordion title="V2.0: React Project-Based Generation (Recommended)" icon="react">
    ### How It Works

    * Creates a **full React/Next.js project** with shared architecture
    * All pages within the project share common components (navigation, footer, layout)
    * Updates to shared components automatically propagate across all pages
    * Context-aware: AI considers your entire project when generating new pages

    ### Key Advantages

    * ✅ **Consistency**: Unified design and components across all pages
    * ✅ **Efficiency**: Update once, apply everywhere
    * ✅ **Scalability**: Easy to manage projects with dozens of pages
    * ✅ **Intelligent**: AI understands your project context
    * ✅ **Auto-Recovery**: Automatic error detection and fixing
    * ✅ **Real-Time Updates**: See task breakdowns as pages generate

    ### Best For

    * Multi-page websites
    * Professional business sites
    * E-commerce platforms
    * Portfolios with multiple sections
  </Accordion>

  <Accordion title="V1.0: Single-Page Generation (Legacy)" icon="html5">
    ### How It Worked

    * Generated **isolated, standalone pages**
    * Each page was created independently with no shared code
    * Every page had its own navigation, footer, and components

    ### Limitations

    * ❌ **Inconsistency**: Each page could have different styles and navigation
    * ❌ **Inefficiency**: Had to update each page individually
    * ❌ **No Context**: AI couldn't consider other pages when generating
    * ❌ **No Error Recovery**: Failed pages required starting over
    * ❌ **Maintenance Burden**: Hard to keep multiple pages aligned

    ### When to Use

    * Simple landing pages
    * One-off designs
    * Quick prototypes
  </Accordion>
</AccordionGroup>

## Getting Started

When creating a new project, select **React (Recommended)** as your framework:

<Steps>
  <Step title="Create New Project">
    Click **New Project** in your dashboard
  </Step>

  <Step title="Select React Framework">
    Choose **React (Recommended)** to access V2.0 features
  </Step>

  <Step title="Describe Your Website">
    Tell Readdy what you want to build — be specific!
  </Step>

  <Step title="Watch Real-Time Generation">
    See task breakdowns as Readdy builds your complete project
  </Step>

  <Step title="Add More Pages">
    Use the AI to generate additional pages that automatically match your project's style
  </Step>
</Steps>

<Info>
  **New in V2.0**: During generation, Readdy provides real-time updates showing exactly what tasks are being performed. You'll see the AI thinking through your project structure!
</Info>

## Key Features

* **In-Project Routing**: Navigate between pages with forward/back buttons and quick-access menu

<Frame>
  <img alt="Readdy 2.0 In-Project Routing" />
</Frame>

* **Desktop & Mobile Preview**: Switch between device views to test responsive design
* **One-Click Error Fix**: AI automatically detects and resolves generation issues
* **Code Input Support**: Add reference code to guide AI generation
* **Advanced Integrations**: Connect with Supabase, Shopify, Stripe, and more

## FAQ

<AccordionGroup>
  <Accordion title="Can I migrate my V1.0 pages to V2.0?" icon="arrows-rotate">
    Currently, V1.0 and V2.0 projects are separate. We recommend creating a new React project in V2.0 and regenerating your pages to take advantage of shared components and improved AI context.
  </Accordion>

  <Accordion title="What if I only need a single page?" icon="file">
    V2.0 works great for single pages too! Even with one page, you'll benefit from cleaner code, better structure, and the option to easily expand later.
  </Accordion>

  <Accordion title="Is there a learning curve?" icon="graduation-cap">
    Not at all! The generation process is just as simple — describe what you want, and Readdy builds it. The complexity is handled behind the scenes.
  </Accordion>
</AccordionGroup>

<Note>
  Have questions about upgrading? [Contact our support team](mailto:hi@readdy.ai) — we're here to help! 💜
</Note>


# Integrate with Google Analytics
Source: https://docs.readdy.ai/tricks/analytics

Set up Google Analytics tracking on your Readdy website to monitor visitor behavior, traffic sources, and performance metrics

Google Analytics is a powerful, free web analytics tool that helps you understand your website visitors and their behavior. By integrating it with your Readdy website, you can track page views, user demographics, traffic sources, and much more.

<Info>
  Google Analytics provides valuable insights that can help you improve your website's performance and better understand your audience.
</Info>

## Why Use Google Analytics?

* **Track visitor behavior**: See which pages are most popular
* **Understand your audience**: Learn about visitor demographics and interests
* **Monitor traffic sources**: Discover how visitors find your website
* **Measure conversions**: Track goals and important user actions
* **Free and comprehensive**: Industry-standard analytics at no cost

## If you're new to Google Analytics (GA)

<Steps>
  <Step title="Step 1: Start Setup">
    Go to the [Google Analytics platform](https://analytics.google.com) and click **"Start measuring"** to begin setup.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 2: Configure Account">
    Follow the setup steps to configure your GA account.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 3: Select Platform">
    When you reach "Data Collection", select **"Web"** as your platform type.

    <Info>
      Note: Readdy currently only supports website projects.
    </Info>

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 4: Set Up Data Stream">
    Enter your **published domain** and give your Data Stream a name. Then click **"Create and Continue"**.

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 5: Connect to Readdy">
    A popup will appear with your Google tag. Copy the code and paste it into the input field in Readdy. Click **"Connect"** to generate a new version. Don't forget to re-publish your domain afterwards.

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 6: Test Connection">
    Back in GA, click **"Test installation"** to check if the connection is working.

    <Frame>
      <img />
    </Frame>

    <br />

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 7: View Reports">
    Once connected, GA will start collecting user data from your site. You can view reports under the **"Reports"** tab later.

    <Frame>
      <img />
    </Frame>
  </Step>
</Steps>

## If you already have a Data Stream in GA

<Steps>
  <Step title="Step 1: Access Admin Panel">
    Log into GA, go to your property's **Admin panel**.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 2: Navigate to Data Streams">
    Under **Property Settings** > **Data collection and modification**, select **"Data Streams"**.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 3: Choose Data Stream">
    **If you already have a Web Data Stream**, select it.

    <Frame>
      <img />
    </Frame>

    **If no existing Data Stream is available**, click **"Web"** to create one. Follow the steps from Step 4 to Step 6 in the "New to GA" section.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 4: Access Google Tag">
    In the Google tag section, click **"View tag instructions"**.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 5: Get the Code">
    Switch to the **"Install manually"** tab and copy the Google code.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 6: Connect to Readdy">
    Go back to Readdy, paste the code into the input field, and click **"Connect"**. A new version connected to GA will be created.

    <Warning>
      Remember to re-publish your site so GA can start tracking your user data.

      <Frame>
        <img />
      </Frame>
    </Warning>
  </Step>
</Steps>

## After Integration

### Viewing Your Analytics Data

<Tip>
  Once connected, Google Analytics will start collecting user data from your site. You can view comprehensive reports under the **"Reports"** tab in your GA dashboard.
</Tip>

### What You Can Track

* **Real-time visitors**: See who's on your site right now
* **Page views**: Most and least popular pages
* **User demographics**: Age, location, and interests
* **Traffic sources**: Search engines, social media, direct visits
* **User behavior**: How visitors navigate through your site

## Troubleshooting

<Accordion title="Analytics Not Working?">
  **Common solutions:**

  1. **Check if you republished**: Analytics won't work until you republish your site after connecting
  2. **Verify the code**: Make sure you copied the complete Google tag code
  3. **Wait for data**: It can take 24-48 hours for data to appear in GA
  4. **Test installation**: Use the "Test installation" feature in Google Analytics
  5. **Check domain**: Ensure your domain is correctly published and accessible

  If issues persist, contact our support team for assistance.
</Accordion>

<Accordion title="Multiple Websites Setup">
  If you have multiple websites, you can:

  1. **Create separate data streams** for each domain in the same GA property
  2. **Use different GA properties** for completely separate tracking
  3. **Set up cross-domain tracking** if the sites are related

  Choose the approach that best fits your analytics needs.
</Accordion>


# Error Fix
Source: https://docs.readdy.ai/tricks/error-fix

Troubleshoot and resolve common errors during AI generation in Readdy with effective debugging techniques

While using Readdy, you might occasionally encounter errors during AI generation. Don't worry – here are effective ways to resolve them and get back on track.

### Basic Fixes

When errors occur during page generation, Readdy automatically attempts one Fix operation, which resolves most common issues. If the automatic fix doesn't work, you can:

<Frame>
  <img />
</Frame>

1. **Click the "Try Fix" button**: Manually trigger another repair attempt
2. **Add repair guidance**: Describe the specific issue or preferred fix direction in the chat

### Complex Error Resolution

For persistent issues that remain after 2-3 fix attempts, we recommend this systematic approach:

**Error Analysis**\
Copy the error message into the chat and ask AI to analyze first:

```
[paste error message]
Please analyze the root cause of this error. Don't modify the code yet.
```

**Implement Fix**\
After receiving detailed analysis, proceed with the repair:

```
Now please implement the fix based on your analysis.
```

### Disable edit tool

For some syntax errors, invalid content deletion, and other errors that AI cannot complete but has not failed, we can solve them by disabling the edit tool. The specific method is to add "Do not use edit tool" repeated 3 times after your specific request.

**For example:**

```
{Your request here}
Do not use edit tool. Do not use edit tool. Do not use edit tool.
```

If it's an error message, you can copy all the error messages and paste them into the input box. For example:

```
{Your error message here}
Do not use edit tool. Do not use edit tool. Do not use edit tool.
```

### Version Rollback

When a version has serious issues, you can revert by following these steps:

1. **Locate the problematic version**: Find it in the right-side chat panel
2. **Automatic rollback**: The system will automatically revert to the previous working version
3. **Continue development**: Resume editing from the stable version

### Network Request Errors

If API requests in your application fail:

1. **Open browser console** (F12)
2. **Check the Network panel**: Locate the failed request
3. **Copy error details**: Focus on the response content
4. **Share with AI**: Paste the error information in the chat for repair assistance

<Frame>
  <video />
</Frame>

**Example conversation:**

```
API request failed with the following error:
Response: {"error": "User not found"}
Please help analyze and fix this issue.
```

### Need Help?

If none of the above solutions resolve your issue, we're here to help! To assist you more effectively, please reach out to us with the following information:

* **Detailed problem description**: Help us understand exactly what you're experiencing
* **Your project's Request ID**: This is crucial for our team to investigate the issue quickly

You can find instructions on how to get your Request ID in our [Getting a Request ID guide](/troubleshooting/getting-a-request-id).

Contact us at [hi@readdy.ai](mailto:hi@readdy.ai) or use our live chat — we're committed to getting you back on track!\
Thank you for your patience, and remember — every great project faces challenges. We're here to help you through this! ✨


# Create File Upload Function
Source: https://docs.readdy.ai/tricks/fileupload-display

Create a file upload and display system with Supabase in your Readdy project

You might want to build a file upload and display system to handle various file types (such as PDFs, images, documents).\
Let's use **Supabase** as the backend and integrate it into your Readdy project.

## File Upload and Display System

<Steps>
  <Step title="Preparation">
    Before you start, make sure you have the following ready:

    * **Project Environment**\
      Create a **React-Next.js** project, or a **React** project.
      <Frame>
        <img />
      </Frame>
    * **Backend Service**\
      Use **Supabase** as your backend.\
      Please check **[How to connect Supabase](/integrations/supabase)** first.
  </Step>

  <Step title="Create the File Upload System">
    In Readdy, enter the requirement:

    ```
    Design a file upload and display system
    ```
  </Step>

  <Step title="Define the Prompt">
    Add the following functional requirements as your **Prompt**:

    ```
    I need a backend to upload papers in PDF format.
    After the PDF is successfully uploaded, the uploaded PDF needs to be displayed on the front-end interface.
    ```
  </Step>

  <Step title="Add Tips">
    To ensure proper configuration, add these **Tips**:

    ```
    - Set strict check constraints in Supabase.
    - Pay attention to creating buckets and setting correct RLS permissions.
    - Set default database form data.
    ```
  </Step>

  <Step title="Check the Implementation">
    After development, verify your implementation in three ways:

    **1. Check prompt execution**: Confirm Readdy generated the correct logic.

    <Frame>
      <img />
    </Frame>

    **2. Check functionality**: Verify upload, display, and download work correctly.

    <Frame>
      <img />
    </Frame>

    **3. Check Supabase data**: Ensure the bucket and database contain the uploaded records.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Error Handling">
    If the feature fails, handle errors as follows:

    * Copy the error message (see example below).
      <Frame>
        <img />
      </Frame>
    * In Readdy, enter:
      ```
      Error Report: [your error message]
      Review all code and fix all issues
      ```
  </Step>
</Steps>


# Find Clients for the Agency
Source: https://docs.readdy.ai/tricks/find-clients

Use Outscraper to collect a prospect list you can upload into Readdy Outreach Campaign.

This guide shows one practical workflow for agencies that want to use [Outreach Campaign](/features/outreach-campaign) but do not already have a client list. It walks through using [Outscraper](https://outscraper.com/) to collect prospect data, clean the file, and upload it into Readdy.

<Info>
  This workflow uses [Outscraper](https://outscraper.com/), a third-party
  service. Readdy does not manage Outscraper pricing, billing, permissions, or
  data coverage.
</Info>

## What You Will Get

After following this guide, you should have:

* A CSV file with business prospects
* An `email` column that can be uploaded into Readdy
* Extra columns such as `description`, `address`, `industry`, `phone`, or `website` that you can later use as variables in your outreach email

## Step-by-Step

<Steps>
  <Step title="Log in to Outscraper">
    Go to [Outscraper](https://outscraper.com/) and sign in to your account.
  </Step>

  <Step title="Open Google Maps Scraper">
    In **All Services**, find **Google Maps Scraper** and click **Open Service**.

    This is just one example workflow. If you prefer a different source, you can
    choose other services in Outscraper instead, such as **Yelp**, **LinkedIn**,
    **Yellow Pages**, and other similar directories or lead sources.

    <Frame>
      <img alt="Outscraper All Services page with Google Maps Scraper highlighted" />
    </Frame>
  </Step>

  <Step title="Choose the industry, location, and result limit">
    Select the type of businesses you want to target, the areas you want to
    search, and the maximum number of results you want to collect.

    <Frame>
      <img alt="Google Maps Scraper settings for categories, locations, and result limit" />
    </Frame>
  </Step>

  <Step title="Choose a search pack">
    We recommend **Cold Email Outreach Pack** because it can help you find email
    addresses and validate whether those emails are usable for outreach.

    <Frame>
      <img alt="Outscraper Cold Email Outreach Pack selected" />
    </Frame>
  </Step>

  <Step title="Set the result format and fields">
    Open **Other parameters (result format, task tags)** and set the export for
    your Readdy workflow.

    * Set **Result extension** to `CSV`
    * Add `email` as a field, because it is required by Readdy Outreach Campaign
    * Add extra fields such as `description`, `address`, `industry`, `phone`, or
      `website` depending on which variables you want to use later in your email

    After that, click **Get Data**.
  </Step>

  <Step title="Confirm the task">
    Review the task summary, then click **Confirm**.

    <Frame>
      <img alt="Outscraper confirm task dialog" />
    </Frame>
  </Step>

  <Step title="Open Tasks and download the result when it is ready">
    Click **Tasks** in the top navigation bar. If the task is still running, wait
    until it finishes. Once it is complete, click the **download** button.

    <Frame>
      <img alt="Outscraper Tasks page with the download button highlighted" />
    </Frame>
  </Step>

  <Step title="Filter and clean your client list">
    Open the downloaded file in Excel or Google Sheets and review the rows before
    using them for outreach.

    Remove or filter out rows without an email, government or public-sector
    websites, businesses whose websites are already very complete, and any
    businesses that are clearly not a fit for your agency.

    <Frame>
      <img alt="Spreadsheet showing an Outscraper export being reviewed and cleaned" />
    </Frame>
  </Step>

  <Step title="Upload the file into Readdy Outreach Campaign">
    Go to [Outreach Campaign](/features/outreach-campaign), upload your cleaned
    CSV file, review the table, and continue with the email setup flow.

    The columns you keep in the CSV can become variables in your outreach email.
    For example, if you keep `description`, `address`, or `industry`, you can use
    them later to personalize your content.

    <Frame>
      <img alt="Readdy Outreach Campaign data preview page with upload button" />
    </Frame>
  </Step>
</Steps>

<Tip>
  Keep `email` in your file. It is required for Readdy Outreach Campaign. Add
  extra columns only if you plan to use them as variables in your subject line
  or email body.
</Tip>

<Warning>
  Outscraper results still need human review. Even with email enrichment and
  validation, some rows may be missing data, irrelevant, or poor-fit prospects.
</Warning>

## FAQ

<AccordionGroup>
  <Accordion title="Do I have to use Google Maps Scraper?">
    No. Google Maps Scraper is just the example used in this guide. You can also
    use other Outscraper services, such as Yelp, LinkedIn, Yellow Pages, or other
    lead sources, as long as the final file contains the fields you need for
    Readdy.
  </Accordion>

  <Accordion title="Which field is required for Readdy Outreach Campaign?">
    The `email` field is required. Without an `email` column, you will not be able
    to use the file directly in Readdy Outreach Campaign.
  </Accordion>

  <Accordion title="Can I keep extra columns in the CSV file?">
    Yes. You can keep columns such as `description`, `address`, `industry`,
    `phone`, or `website` if you want to use them later as variables in your
    outreach email.
  </Accordion>

  <Accordion title="Why should I clean the file before uploading it to Readdy?">
    Raw exports often include rows without email addresses, poor-fit businesses,
    government websites, or companies whose websites are already strong enough
    that they are unlikely to be good outreach targets. Cleaning the file helps
    improve campaign quality.
  </Accordion>

  <Accordion title="What if the Outscraper task is still running?">
    Wait until the task finishes, then download the CSV from the **Tasks** page.
    If needed, refresh the Tasks page and check again later.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue:

* Submit a support ticket: [readdy.ai/feedback](https://readdy.ai/feedback)
* Use the live chat in the top-right corner of Readdy


# Generate Animations with Readdy Effects
Source: https://docs.readdy.ai/tricks/generate-animations

Browse curated animation prompts on Readdy Effects and use them in Readdy to add motion to text, images, and interactions

Readdy Effects is a prompt library for website motion. You can browse examples, copy a prompt, and adapt it in Readdy.

With Readdy Effects, you can:

* **Explore text effects**: Add motion to headlines, labels, and short UI copy
* **Animate images**: Make hero visuals, banners, and media sections feel more dynamic
* **Improve interactions**: Add hover states, button feedback, and lightweight micro-interactions

## Before You Start

<Info>
  This works best after your layout is in place. To animate a specific element, use **Selector** first.
</Info>

Before you begin, make sure:

* You know which section or element should animate
* You know whether you need a text, image, or interaction effect
* You start with one effect at a time

## How It Works

<Steps>
  <Step title="Open Readdy Effects">
    Open [Readdy Effects](https://effects-cn.readdy.co) and browse the examples.

    <Frame>
      <img alt="Readdy Effects homepage with the hero area, top navigation, and effect categories" />
    </Frame>
  </Step>

  <Step title="Choose an effect category">
    Choose the category that fits your goal:

    * **Text Effects** for headlines, labels, and short copy
    * **Image Effects** for hero visuals, banners, and media blocks
    * **Interactive Animations** for buttons, cards, hover states, and feedback

    <Frame>
      <img alt="Readdy Effects category tabs showing Text Effects, Image Effects, and Interactive Animations" />
    </Frame>
  </Step>

  <Step title="Copy a prompt that matches your layout">
    Open an effect, click **View Prompt**, and copy the prompt. Then adjust it to fit your content, tone, and target element.

    <Frame>
      <img alt="An effect card in Readdy Effects with View Prompt expanded" />
    </Frame>
  </Step>

  <Step title="Target the right area in Readdy">
    In Readdy, decide how narrow the change should be.

    1. For a specific element, turn on **Selector** and select it first.
    2. For a section-level effect, name the section clearly.
    3. For page-wide motion, say exactly where it should and should not appear.

    <Frame>
      <img alt="The Readdy editor with Selector enabled and the target element highlighted" />
    </Frame>
  </Step>

  <Step title="Paste the prompt and refine it">
    Paste the prompt into Readdy and refine the result. If the motion is too strong, ask for a subtler, slower, or hover-only version.

    <Frame>
      <video />
    </Frame>
  </Step>
</Steps>

## Prompt Tips

Start with the Readdy Effects prompt, then add:

* **Target**: Which element should animate
* **Trigger**: When it should happen
* **Style**: Subtle, playful, smooth, energetic, premium, and so on
* **Limit**: Loop, once, or hover only

Example refinements:

```text theme={null}
Apply this effect only to the hero headline. Keep it subtle and premium, and do not animate the rest of the section.
```

```text theme={null}
Use this hover effect for the pricing cards, but reduce the movement distance and keep the transition smooth.
```

```text theme={null}
Add this animation to the CTA button only when users hover over it. Do not add auto-looping motion.
```

## Best Practices

* Start with one focal animation, such as a headline, hero image, or CTA button
* Match the effect to the content type instead of reusing the same motion everywhere
* Keep marketing pages subtle so motion supports the message
* If the first result is close, refine the same prompt instead of rewriting it

## FAQ

<AccordionGroup>
  <Accordion title="Can I use Readdy Effects on an existing page?">
    Yes. This is often the easiest way to add motion without changing the layout.
  </Accordion>

  <Accordion title="What should I do if the animation affects too many elements?">
    Narrow the scope. Tell Readdy exactly what should animate and what should stay static.
  </Accordion>

  <Accordion title="What if the animation feels too strong or distracting?">
    Ask Readdy to reduce the intensity, shorten the duration, remove looping, or trigger it only on hover or in view.
  </Accordion>

  <Accordion title="Should I add multiple animations in one request?">
    Start with one effect at a time. Once it looks right, add the next one.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Make a Logo
Source: https://docs.readdy.ai/tricks/logo

Create professional logos for your website using third-party tools like Lovart and integrate them into your Readdy project

You might want to design a logo for your website.
Let's harness the power of third-party resources.

## Using Lovart to make a logo for free

<Steps>
  <Step title="Visit Lovart">
    Go to [Lovart](https://lovart.ai)
  </Step>

  <Step title="Create a logo for your website">
    You can describe the logo you want:

    ```
    Design a logo for my bakery website without the text.
    ```

    <Info>Remember to generate only the logo image, without the text.</Info>
  </Step>

  <Step title="Download">
    After you finish the design, you can **download from Right Click**.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Upload">
    Upload to Readdy in the right bottom corner Chat Box, and tell Readdy:

    ```
    make this image as the logo
    ```

    <Frame>
      <img />
    </Frame>
  </Step>
</Steps>


# How to Use Readdy Efficiently
Source: https://docs.readdy.ai/tricks/prompting-tips

Best practices for effective AI prompt engineering and code generation

## How to Use Readdy Efficiently

### ✅ Recommended AI Interactions

Readdy's Agent excels at web editing and building tasks. You can ask the AI to help you with:

* **Implementing specific web features** (e.g., adding login/registration functionality, setting up payment features)
* **Adjusting page layouts** (e.g., modifying component order, adjusting element layout)
* **Adding page content** (e.g., adding new sections, inserting videos or images)
* **Updating page styles** (e.g., changing fonts, colors, button styles)

### 🚫 Not Recommended Usage Patterns

The current version of Readdy Agent focuses primarily on website editing tasks. To help you make the most of your credits:

* Don't specify the technology stack for Readdy, as it currently only supports React by default
* Don't present multiple complex tasks at once, as this may lead to suboptimal generation results

***

## Prompt Engineering Best Practices

### Clear and Specific Prompts

The clarity and specificity of your prompts directly correlate with the accuracy of generated results. When crafting prompts, consider including the following elements as needed:

* Expected functionality and business logic
* Page section positioning and component placement
* Detailed layout and design requirements (optional)

Poor example:

```
Create a login page
```

Good example:

```
Create a login page with a split-screen layout. The left section displays a hero image, and the right section contains a togglable login/registration form with Google OAuth integration.
```

### Focus on Single Tasks and Pages

Large Language Models have limited attention mechanisms. When presenting multiple tasks simultaneously, the generated results may not meet expectations. We recommend decomposing complex requirements into focused, sequential executions.

For optimal code quality, we highly recommend generating one page component at a time rather than requesting multiple pages in a single prompt.

<Callout type="warning">
  **🟡 Not Recommended:**

  ```
  Build an e-commerce website where users can click on product listings to go to detail pages, then purchase or add items to cart. The cart page should have a checkout button with Stripe payment support, preferably with coupon functionality, and redirect to an order page after successful payment.
  ```
</Callout>

<Callout type="success">
  **🟢 Recommended:**

  ```
  Create a product detail page component accessible via product listing navigation. The detail page should display product images, title, pricing, and specifications, with "Buy Now" and "Add to Cart" action buttons.
  ```
</Callout>

### Target Specific UI Components

When modifying specific elements that are difficult to describe verbally, use the **Selector** tool to precisely target them.

After selecting an element, describe your modification intent directly in the input field:

```
Modify the selected component to increase border radius and add more padding for improved visual hierarchy.
```

### Chat Mode

For complex business logic, feature planning, or AI consultation, establish consensus through dialogue before implementing modifications. This prevents significant divergence between AI-generated code and expected functionality.

Request interactive dialogue mode with:

```
Please don't modify the code yet.
```

Once consensus is reached, proceed with implementation requests.

### Minimize Context Dependencies

LLMs operate within limited context windows, and Readdy follows the same constraints. Each execution cannot retain communications and modifications from distant interactions. Provide specific requirements for each modification to avoid over-reliance on previous context.

Poor example:

```
Revert the login/registration page to the previous style
```

Good example:

```
Implement a split-screen layout where the left section displays a hero image and the right section contains a togglable login/registration form with Google OAuth integration.
```

***

## Page Management

### 🗑️ Delete Pages

Simply tell AI which page you want to delete. For example:

```
Please delete the "About Us" page.
```

### 📄 Duplicate Pages

Similarly, just specify which page to copy. For example:

```
Please duplicate the homepage and name it "Homepage Copy".
```

### 📦 Duplicate Entire Projects

Currently, Readdy doesn't support one-click project duplication, but you can achieve project replication through the following method:

1. Create a new project
2. Send the following instruction to the AI:

```
Rebuild this website URL: [your reference website]
Make exactly the same website for me, using my content, layout, structure, images and keep all the features.
```

You can also use this instruction to reference websites you like for design inspiration.

<Callout type="warning">
  **Note:** This feature only works for projects built with React or Next.js.
</Callout>

***

## Visual Styling

### Style Keywords for Different Website Styles

You can directly tell AI what visual style you want for your website. Here are some popular styles:

<Columns>
  <Frame>
    <img alt="Minimalism" title="Minimalism" />
  </Frame>

  <Frame>
    <img alt="Neobrutalism" title="Neobrutalism" />
  </Frame>

  <Frame>
    <img alt="Vaporwave" title="Vaporwave" />
  </Frame>

  <Frame>
    <img alt="Brutalist" title="Brutalist" />
  </Frame>

  <Frame>
    <img alt="Pixel Art" title="Pixel Art" />
  </Frame>

  <Frame>
    <img alt="Retro" title="Retro" />
  </Frame>
</Columns>

Available style keywords:

* **Minimalism** - Clean, minimalist design
* **Neobrutalism** - Neo-brutalist style
* **Vaporwave** - Vaporwave aesthetic
* **Brutalist** - Brutalist design
* **Pixel Art** - Pixel art style
* **Retro** - Retro/vintage style

Example prompt:

```
Style: Minimalism
```

### Micro-interactions

When generating landing pages, strategic micro-interactions and subtle animations enhance user experience. Through conversational prompting, the AI can efficiently implement animation effects.

<Frame>
  <div>
    <iframe />
  </div>
</Frame>

Effective prompting approach:

```
Implement subtle animations and micro-interactions to enhance user engagement
```

### Design Reference

Providing visual references for style and layout significantly improves generation quality. Browse platforms like Dribbble and Mobbin to identify suitable design patterns, save them as images, and upload to Readdy for reference-based generation. Specify the reference focus in your prompts:

```
Reference the color palette from this image to generate a...
```

***

## Adding Media Content

### 🎥 How to Add Background Videos

You can add video backgrounds to your website through the following methods:

**Option 1: Use Supabase**

Upload your video to Supabase and get the video link
👉 [How to use shared files](/tricks/shared-files)

**Option 2: Use YouTube or other platforms**

Use direct video links from YouTube or other platforms

**Implementation Steps:**

1. Use the **Selector** tool to select where you want to insert the video (e.g., Hero section)

2. Send the following instruction to the AI:

```
Please play the video from this URL in the Hero section and set it to loop.
```

***

## Quick Reference Summary

### ✅ Do's

* Be specific and clear in your prompts
* Focus on one task at a time
* Use the Selector tool for precise modifications
* Provide visual references when possible
* Break complex tasks into smaller steps

### ❌ Don'ts

* Request multiple complex tasks simultaneously
* Rely on context from distant conversations
* Vague or ambiguous prompts

### 🎯 Best Practices

1. **Single Task Focus**: Generate one page or component at a time
2. **Specific Requirements**: Include layout, functionality, and design details
3. **Visual References**: Use images to guide style and design
4. **Iterative Approach**: Build and refine step by step
5. **Context Management**: Provide full requirements for each modification

***

<Callout type="info">
  **Need More Help?**

  * Ask AI: Available in your project
  * Check our [troubleshooting guide](/troubleshooting/getting-a-request-id)
  * Readdy Support: Submit a [support ticket](https://readdy.ai/feedback)
</Callout>


# Restore to Version
Source: https://docs.readdy.ai/tricks/restore

When you're not satisfied after several rounds of edits, how can you restore back to the original version?

Sometimes during the editing process, you might find that your changes aren't quite what you expected, or you want to go back to a previous version of your project. Readdy provides two convenient ways to restore to an earlier version of your website.

<Info>
  **What is version restoration?**\
  Version restoration allows you to restore your project to any previous state. This is useful when you want to undo recent changes or go back to a version you were happy with.
</Info>

## Method 1: Click directly on a version to restore to it

This is the quickest way to restore to a specific version. You can see all your project versions and select the one you want to restore.

<Steps>
  <Step title="Step 1: Find the Target Version">
    In your message history, find the version you want to restore to.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 2: Click to Restore">
    Click on this version to restore to it.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Step 3: Input New Requirements">
    After restoring to the target version, you need to enter some requirements in the input box to generate a new version based on it.

    <Frame>
      <img />
    </Frame>
  </Step>
</Steps>

## Method 2: Delete messages from the latest backwards until you reach the original version

<Info>
  **When to use this method**\
  If the version you want to restore to is not far from the current version (for example, only two or three versions apart), you can delete the latest version to go back to your desired version.
</Info>

## Important Considerations

<Warning>
  **Data Loss Warning**\
  Only deleting versions will permanently remove the deleted version records. Restoring to a previous version will not cause data loss.
</Warning>

<Tip>
  **Best Practice**\
  Before making major changes, consider carefully which version you want to restore to, It's also helpful to note down the current version number for easy reference.
</Tip>

<Info>
  **Important Note**\
  The final published version is based on the latest version in your message flow. You can combine both methods above to achieve your desired result - use method 1 to quickly jump to a specific version, or use method 2 to step back through recent versions.
</Info>

## Troubleshooting

If you encounter issues during the restoration process:

<Accordion title="Version not found">
  If you can't find the version you're looking for, check if you're looking in the correct project or if the version history is properly loaded.
</Accordion>

<Accordion title="Restoration failed">
  If the restoration process fails, try refreshing the page and attempting again. If the problem persists, contact support.
</Accordion>

***

## Need Help?

If you're having trouble with version restoration or need assistance with any other features, contact us at [hi@readdy.ai](mailto:hi@readdy.ai) or use our live chat in the top right corner of Readdy. We're here to help!

Thank you for using Readdy! ❤️


# Shared Files
Source: https://docs.readdy.ai/tricks/shared-files

Use Supabase to generate public file URLs and integrate them into your Readdy project

You may want to share files in your Readdy project through public links.\
Let’s use Supabase to generate URLs for your files and attach them in Readdy.

## Using Supabase to generate a file link

<Steps>
  <Step title="Log in to Supabase and create a project">
    Log in to [Supabase](https://supabase.com) and create a new project.

    **1. Sign in to Supabase dashboard**

    <Frame>
      <img />
    </Frame>

    **2. Create a new project**

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Create a new storage bucket">
    **1. Navigate to Storage section**

    <Frame>
      <img />
    </Frame>

    **2. Click New bucket button**

    <Frame>
      <img />
    </Frame>

    **3. Configure bucket settings**

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Upload files">
    **1. Upload files to the bucket**

    <Frame>
      <img />
    </Frame>

    **2. Get the public URL**

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Add the link in Readdy">
    * Go back to Readdy.
    * In the text box, select the **Selector** and choose a button.

    **1. Add link to button**

    <Frame>
      <img />
    </Frame>

    **2. Save the link configuration**

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Final result">
    Once completed:

    * Your file now has a public URL generated by Supabase.
    * In Readdy, the button is bound to the file link, so users can click and open it directly.
  </Step>
</Steps>


# Common Issues
Source: https://docs.readdy.ai/troubleshooting/common-issues

Solutions to frequently encountered problems and errors



# Export a HAR File
Source: https://docs.readdy.ai/troubleshooting/export-har-file

Record and export a HAR file from Chrome DevTools so the Readdy support team can investigate website issues

If you see an issue on your published site, a HAR file helps the Readdy support team understand the browser activity that led to it. Follow these steps in Chrome while you reproduce the issue.

<Info>
  A HAR file records the network requests your browser makes while the issue occurs. Keep Chrome DevTools open until you export the file.
</Info>

## How to Export a HAR File

<Steps>
  <Step title="Open the page where you encountered the issue">
    You can open it directly in the editor, use **"Share"** to open it in a browser tab, or visit the published website.
  </Step>

  <Step title="Open Chrome DevTools">
    Right-click anywhere on the published page, then select **"Inspect"** to open Chrome DevTools.

    <Frame>
      <img alt="Inspect option in the browser context menu" />
    </Frame>
  </Step>

  <Step title="Select the Network Tab">
    Click **"Network"** in Chrome DevTools.

    <Frame>
      <img alt="Network tab in Chrome DevTools" />
    </Frame>
  </Step>

  <Step title="Enable Disable Cache">
    Select **"Disable cache"** in the Network panel.

    <Frame>
      <img alt="Disable cache option in the Network panel" />
    </Frame>
  </Step>

  <Step title="Confirm Network Recording Is Active">
    Make sure the Record button is red. If it is gray, click it to start recording network activity.

    <Frame>
      <img alt="Active network recording control in Chrome DevTools" />
    </Frame>
  </Step>

  <Step title="Enable Preserve Log">
    Select **"Preserve log"** so requests remain available while you reproduce the issue.

    <Frame>
      <img alt="Preserve log option in the Network panel" />
    </Frame>
  </Step>

  <Step title="Clear Previous Requests">
    Click **"Clear"** to remove any requests that were recorded before you started.

    <Frame>
      <img alt="Clear button in the Network panel" />
    </Frame>
  </Step>

  <Step title="Reproduce the Issue and Export the HAR File">
    Refresh the page and reproduce the issue. Then click **"Export HAR"** to download the file and save it to your computer.

    <Frame>
      <img alt="Export HAR control in Chrome DevTools" />
    </Frame>

    <Frame>
      <img alt="Save dialog for the exported HAR file" />
    </Frame>
  </Step>
</Steps>

## FAQ

<AccordionGroup>
  <Accordion title="Do I need to use Chrome?">
    This guide uses Chrome DevTools. Use Chrome to make sure the labels and controls match the steps shown here.
  </Accordion>

  <Accordion title="What should I do after I save the HAR file?">
    Attach the file to your support ticket and include a short description of the issue and the steps you took before it occurred.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Getting a Request ID
Source: https://docs.readdy.ai/troubleshooting/getting-a-request-id

Learn how to obtain a request ID for troubleshooting and getting technical support for your Readdy issues

Something's not working while building your page? No worries — follow this quick guide to help us fix it faster.

<Note>
  For issues unrelated to subscription or other feature-related questions or suggestions, feel free to contact us at [hi@readdy.ai](mailto:hi@readdy.ai).
</Note>

Please select the option that applies to your situation and follow the appropriate steps accordingly.

## How to Copy the Request ID

<Steps>
  <Step title="Select the Latest Version">
    Navigate to your project's version history and locate the most recent version.
  </Step>

  <Step title="Copy the Log">
    Click **Copy Log** as shown in the screenshot below.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Submit to Support">
    Paste the copied information (Request ID) into the feedback form when contacting support.
  </Step>
</Steps>

## How to Copy the Request ID (For Non-Next.js Projects)

<Steps>
  <Step title="Select the Latest Version">
    Navigate to the most recent version in your project history.
  </Step>

  <Step title="Trigger Error Message">
    Click four times to trigger the error message.

    <Frame>
      <img />
    </Frame>
  </Step>

  <Step title="Copy the ID">
    Copy the ID that appears and paste it into the feedback form.

    <Frame>
      <img />
    </Frame>
  </Step>
</Steps>

## Alternative Solution: Delete Problematic Version

If you need to continue working while we resolve the issue:

<Accordion title="How to Delete the Error Version and Return to Working Version">
  1. **Locate the problematic version**: Find it in the right-side chat panel
  2. **Delete the error version**: Click the delete button for that version

  <Warning>
    You can only delete the last conversation at a time. Multiple versions need to be deleted one by one.
    Version deletion cannot be undone. Please confirm the version is truly problematic before deleting.
  </Warning>

  <Frame>
    <img />
  </Frame>

  3. **Automatic rollback**: The system will automatically revert to the previous working version
  4. **Continue development**: Resume editing from the stable version

  This allows you to remove the problematic version and continue your work without interruption.
</Accordion>

## Need Additional Help?

If you're still experiencing issues or need further assistance, don't hesitate to reach out to us at [hi@readdy.ai](mailto:hi@readdy.ai). Include your Request ID in your message for faster troubleshooting.


# Improve Website Performance
Source: https://docs.readdy.ai/troubleshooting/improve-website-performance

Use PageSpeed Insights reports to help Readdy optimize your website for desktop and mobile visitors

If your website loads slowly, you can use Google PageSpeed Insights to identify performance issues and ask Readdy AI to optimize your project based on its diagnostic reports.

<Info>
  PageSpeed Insights is an external Google tool. Performance scores can vary between tests because of network conditions, device simulation, and changes to your website.
</Info>

## How to Improve Your Website Performance

<Steps>
  <Step title="Get Your Website Link">
    Choose the option that matches your website's current status:

    * **Unpublished website:** In your Readdy project, open the preview page in a new browser tab, then copy the preview URL from the address bar.
    * **Published website:** Copy your website's published domain.

    <Frame>
      <img alt="Open preview in a new browser tab from a Readdy project" />
    </Frame>

    <Frame>
      <img alt="Readdy preview URL in the browser address bar" />
    </Frame>
  </Step>

  <Step title="Run a PageSpeed Insights Test">
    Open [PageSpeed Insights](https://pagespeed.web.dev/), paste your preview URL or published domain into the input field, then click **"Analyze"**.

    <Frame>
      <img alt="Website URL entered in PageSpeed Insights" />
    </Frame>
  </Step>

  <Step title="Copy the Mobile and Desktop Report Links">
    When the test is complete, select **"Mobile"**, click **"Copy Link"**, and save the report link. Then select **"Desktop"** and copy that report link too.

    <Frame>
      <img alt="Mobile and Desktop tabs with the Copy Link button in PageSpeed Insights" />
    </Frame>
  </Step>

  <Step title="Ask Readdy AI to Optimize Your Website">
    Return to your Readdy project and paste both report links into the chat. Ask Readdy AI to use the diagnostic results to improve your website's performance.

    For example:

    ```text theme={null}
    These are the PageSpeed Insights report links for the mobile and desktop versions of my website:
    [Mobile report link]
    [Desktop report link]

    Please use the diagnostic results in both reports to optimize my website's performance.
    ```
  </Step>

  <Step title="Publish and Test Again">
    If your website is already published, publish the optimized version and wait 3–5 minutes before running another test. If it is unpublished, open the latest preview in a new tab and test its new preview URL.
  </Step>
</Steps>

<Tip>
  Website performance usually improves through several rounds of testing and optimization. Repeat the process and focus on the highest-impact recommendations instead of expecting a perfect score after one update.
</Tip>

## FAQ

<AccordionGroup>
  <Accordion title="Why is my PageSpeed Insights score different each time?">
    PageSpeed Insights uses simulated devices and network conditions, so results can vary between tests. Compare several tests and look for recurring recommendations instead of relying on a single score.
  </Accordion>

  <Accordion title="Why should I copy both the Mobile and Desktop report links?">
    Mobile and desktop tests use different device and network conditions. Sharing both reports helps Readdy AI identify issues that may affect only one experience.
  </Accordion>

  <Accordion title="Can Readdy AI guarantee a specific performance score?">
    No. Readdy AI can improve issues identified in the reports, but the final score also depends on your content, third-party services, network conditions, and PageSpeed Insights testing conditions.
  </Accordion>
</AccordionGroup>

## Need Help?

If this guide doesn't resolve your issue, [submit a support ticket](https://readdy.ai/feedback). We're here to help!


# Update
Source: https://docs.readdy.ai/update

Synchronize GitHub content

...


# Readdy Help Center
Source: https://docs.readdy.ai/welcome

Official documentation for Readdy — the AI-powered website builder. Guides for creating, editing, integrating, and publishing your AI-generated websites

<img alt="" />

## **Welcome to Readdy**

Readdy is an AI-powered design assistant that helps you instantly generate beautiful websites — and clean, production-ready code — simply by describing your idea and one key to publish.

## **Get Started with Readdy**

Build and launch a beautiful, professional website by chatting with our AI.

<CardGroup>
  <Card title="Quick Start" icon="Rocket" href="/firstapp">
    Describe your idea, get ready-to-use designs and front-end code in minutes.
  </Card>

  <Card title="Features" icon="screwdriver-wrench" href="/features/edit-tool">
    Explore Readdy’s core capabilities — from idea to launch.
  </Card>

  <Card title="Integrations" icon="puzzle" href="/integrations/supabase">
    Connect with Supabase, Figma, Shopify, Stripe, Google Analytics, and more.
  </Card>

  <Card title="Tips & Tricks" icon="stars" href="/tricks/prompting-tips">
    Write clear prompts and iterate to get the best results.
  </Card>

  <Card title="Changelog" icon="code-branch" href="/changelog">
    See what’s new — features, improvements, and fixes.
  </Card>

  <Card title="Support" icon="headset" href="mailto:hi@readdy.ai">
    Questions? Just email us — we’re here to help.
  </Card>
</CardGroup>