無料GitHub で公開日本語紹介

embeds

予約ページをWebサイトにインライン表示、ポップアップ、固定ボタンで埋め込むコードを生成し、テーマや表示言語などを設定するスキルです。

原文原文の説明を見る

Inline, popup, and floating-button embeds — snippet generation and theming.

BuilderIO/agent-nativeスター 7,526(GitHub 7,526 + cccskills 0)

実行スコア未検証

インストール方法を見る

こんなときに便利

予約ページをサイト内に埋め込みたいとき
ポップアップで予約フォームを開きたいとき
埋め込みの色や言語を設定したいとき

日本語での紹介

できること

予約ページをWebサイトに埋め込むための方式とコード例を扱います。ページ内にiframeを置くインライン表示、操作するとモーダルで開くポップアップ、ページ上に固定して表示するボタンを選べます。埋め込み用スクリプトと初期化コードのスニペットを作成し、埋め込みセッションに限ってテーマ、プライマリーカラー、言語、タイムゾーンを設定します。また、予約の完了、キャンセル、日時変更などのイベントを親ページへ通知する仕組みも示します。

こんなときに便利

Webサイト内に予約導線を設けたいときや、予約フォームをページの見た目に合わせて表示したいときに便利です。ページ内に常時表示するか、ボタン操作で開くかを選び、色や言語、タイムゾーンを埋め込み単位で調整できます。

使い方の例

「予約フォームをページ内に表示する埋め込みコードを作って」
「クリックで開くポップアップ形式にして、ダークテーマを設定して」

注意点

埋め込み先のページでスクリプトを読み込み、指定の埋め込みURLを利用します。テーマや言語などの設定は埋め込みセッションに適用されます。

この紹介文は、公開されている SKILL.md をもとに AI（OpenAI Codex）が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル（1）

SKILL.md1.1 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Embeds

Modes

inline — iframe embedded in the page
popup — trigger opens modal overlay with iframe
element-click / floating-button — fixed-position trigger anywhere on the page

URL

Embed page: /:user/:slug/embed — same Booker, no chrome, theme honored via query params.

Snippet

<script src="https://<host>/embed.js" async></script>
<div id="cal-inline-embed"></div>
<script>
  Cal("init", { origin: "https://<host>" });
  Cal("inline", {
    elementOrSelector: "#cal-inline-embed",
    calLink: "my-user/intro",
    config: { theme: "light" }
  });
</script>

Theming

Query params on the embed URL:

theme=light|dark
primaryColor=<hex>
locale=en|es|...
timeZone=America/Los_Angeles

These override the event type's defaults for the embedded session only.

Message passing

The iframe posts messages to the parent on lifecycle events: __cal.init, __cal.booking-successful, __cal.booking-cancelled, __cal.booking-rescheduled.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

同じリポジトリのスキル