Skip to content
cccskills
FreePublished on GitHub

embeds

Generate embed snippets for inline booking forms, modal popups, or floating buttons. Configure display options such as light or dark theme, primary color, locale, and time zone for the embedded session.

OriginalShow the original description

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

BuilderIO/agent-native7,522 stars(GitHub 7,522 + cccskills 0)

Run score Not tested

See how to install

Good for

  • Embedding a booking form inside a webpage
  • Opening a booking form in a modal popup
  • Setting the theme and locale for an embed

Files included (1)

  • SKILL.md1.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

a2a-assets

FreeSummary

Generate, refine, export, and place brand images or videos from an Assets library into another app. The skill covers choosing a library, handling image batches and video runs, and updating selected assets after feedback.

  • Generate brand images for slides or another app
  • Refine an existing asset after feedback
  • Create and export a video asset
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

account-health

FreeSummary

Prepare a customer account health, renewal, or contract usage readout. Verify the account identity, use approved metric definitions, compare contracted capacity with actual usage, and trace findings to sources, time windows, and known gaps.

  • Preparing a named customer's account health review
  • Comparing contracted seats or capacity with usage
  • Gathering adoption signals before a renewal or QBR
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

actions

FreeSummary

Create focused app actions that agents can call as tools and frontend code can use through client hooks. Use them to add provider integrations or fetch UI data, with validated inputs and structured results.

  • Adding a new app operation
  • Connecting an external provider API
  • Fetching data for a frontend view
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

adding-a-feature

FreeSummary

Use this checklist when adding a feature or integration to an agent-native app. It covers the user interface, agent-callable actions, instructions, and app-state sync so both the user and agent can work with the capability consistently.

  • Planning a new feature across UI and agent actions
  • Checking that agent changes appear in the UI
  • Documenting actions and feature state for the agent
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

adhoc-analysis

FreeSummary

Investigate complex questions by combining data from multiple sources, then summarize patterns, metrics, and evidence in a clear report. Save requested analyses as dashboards with instructions for future refreshes.

  • Comparing CRM deals with call records
  • Investigating customer health across systems
  • Saving a repeatable performance analysis
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

admin-surfaces

FreeSummary

Use the Analytics admin surfaces to inspect and change workspace feature flags, review dashboard ownership and usage activity, or browse and edit databases connected from other agent-native apps. The skill guides administrators to the relevant view and actions.

  • Review dashboard owners, views, and edits
  • Change a workspace feature flag for an app
  • Browse or edit a connected app database
BuilderIO/agent-native7.5KUpdated Oct 26, 2026

See all skills by BuilderIO

Report a problem with this skill