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

# 有料イベントサイトを公開する

> Notionから、プログラム、登壇者、会場、有料チケットを揃えて公開します。

export const Connectors = ({items}) => <div style={{
  margin: "8px 0 20px"
}}>
    <style>{`
      .connectors-list, .connectors-list * { margin-top: 0 !important; margin-bottom: 0 !important; }
      .connectors-row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 4px 0 !important;
        min-height: 0 !important;
        height: auto !important;
      }
      .connectors-row img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
        margin: 2px 0 0 !important;
        display: block !important;
      }
    `}</style>
    <div className="connectors-list">
      {items.map((item, i) => <div key={item.id} className="connectors-row" style={{
  borderTop: i === 0 ? "none" : "1px solid rgba(130,130,130,0.22)"
}}>
          <img src={`/images/connectors/${item.id}.svg`} alt="" width={20} height={20} />
          <div style={{
  minWidth: 0
}}>
            <div>
              <strong>{item.name}</strong>
              {item.why ? <span style={{
  opacity: 0.72
}}> · {item.why}</span> : null}
            </div>
            {item.auth === "api-key" ? <div style={{
  fontSize: "11.5px",
  lineHeight: 1.35,
  color: "#F26207",
  marginTop: "2px"
}}>
                Not a native connector. Agent will ask for your API key.
              </div> : null}
          </div>
        </div>)}
    </div>
  </div>;

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

プログラム、登壇者、会場、アクセス方法、チケットのチェックアウトを備えた、完全な有料
イベントサイトを作成します。参加者情報はReplit Databaseに保存し、Stripeで決済を受け付け、
Resendで確認メールを送信し、リストをエクスポートします。リンクを共有する前にテスト注文を
行ってください。

## 最適な用途

* カンファレンス、ミートアップ、ローンチイベント向けに公開ページと有料チケットが必要な
  イベントマーケター。
* 別途コンテンツ管理システムを使わずに、アプリ内でアジェンダを編集したいコミュニティ
  リード。

## コネクタ

<Connectors
  items={[
{
  id: "notion",
  name: "Notion",
  why: "登壇者、プログラム、セッション時間",
},
{ id: "resend", name: "Resend", why: "購入後の確認メール" },
{ id: "stripe", name: "Stripe", why: "有料チケットとチェックアウト" },
]}
/>

## 始める前に

イベント名、日程、会場、チケット価格、登壇者用のNotionデータベース(名前、写真、
セッション)を用意してください。Notion、Resend、Stripeを接続します。Agentがアプリ内に
チェックアウトを構築します。

## エージェントへの指示

<AiPrompt>
  このNotionページ\[リンク]から、完全な有料イベントサイトを作成して:プログラム、
  登壇者、会場、アクセス方法、チケットのチェックアウト。登壇者の名前、写真、肩書き、
  経歴、セッション時間はNotionから使って。Stripeで1チケットあたり\[価格]を課金して。
  参加者情報はReplit Databaseに保存し、Resendで確認メールを送信し、リストを
  エクスポートして。
</AiPrompt>

## 期待できること

Agentは公開サイトを構築し、チェックアウト、決済、確認メール、参加者リストを接続します。
リンクを共有する前にテスト注文を行ってください。Stripeのテストモードとテストカードを
使い、確認メールが届くこと、参加者がリストに登録されること、エクスポートに参加者が
含まれることを確認してから、実際の課金に切り替えてください。

## 自分に合わせてカスタマイズする

<AiPrompt>
  このNotionデータベース\[リンク]から登壇者ページを追加して。名前、写真、肩書き、経歴、
  セッション時間を使って。Notionが変わったらページも同期させて。
</AiPrompt>

<AiPrompt>
  参加者が\[n]人に達したらチケット販売を締め切り、代わりにキャンセル待ちフォームを
  表示して。
</AiPrompt>

## トラブルシューティング

* **確認メールが届かない:** Resendが接続されていること、送信ドメインが検証済みであることを確認してください。テスト注文を行い、Resendダッシュボードでメールが送信されたか確認してください。
* **登壇者や時間が間違っている:** Notionデータベース(名前、写真、肩書き、経歴、セッション時間)をAgentに指定し、Notionが変わったらページも同期させるよう依頼してください。
* **チェックアウトで課金されない:** Stripeが接続されていること、まずテストモードになっていることを確認してください。リンクを共有する前にテスト注文を行ってください。

## 関連情報

<CardGroup cols={2}>
  <Card title="ランディングページをデザインする" href="/ja/use-cases/design-landing-page">
    待機リストやローンチページにも、同じNotionのソースを使用できます。
  </Card>

  <Card title="ソーシャル用アイコンとバナーを作成する" href="/ja/use-cases/create-social-kit">
    プロフィールやカバー素材も必要なイベントマーケター向けです。
  </Card>
</CardGroup>