Coachable CardsDocs
Back to Platform

Your First Deck

Goal

Create, share, and embed your first Coachable Cards deck with copy-paste ready examples.

Quick Start

  1. Create a deck using the deck builder
  2. Share it with a direct link
  3. Embed it in your website

All in under 5 minutes.

Create a Deck

Using the Web Interface

  1. Go to https://c.cards/create
  2. Enter your deck name and description
  3. Add cards (questions)
  4. Choose a subdomain (e.g., mydeck.c.cards)
  5. Click "Launch Deck"

Using the API

POST /api/create/deck
Content-Type: application/json

{
  "title": "My First Deck",
  "description": "A deck for reflection",
  "slug": "my-first-deck",
  "cards": [
    { "text": "What am I avoiding?" },
    { "text": "What would I do if I wasn't afraid?" },
    { "text": "What's one thing I can ship today?" }
  ]
}

Response:

{
  "success": true,
  "deck": {
    "id": "deck-id",
    "slug": "my-first-deck",
    "title": "My First Deck",
    "shareable_link": "https://mydeck.c.cards/my-first-deck"
  },
  "cardsCount": 3
}

Share a Deck

Direct Link

Every deck gets a shareable link:

https://{subdomain}.c.cards/{deck-slug}

Example:

https://mydeck.c.cards/my-first-deck

Share a Specific Card

Get the card ID from the URL or API, then:

https://c.cards/shared/{card-id}

Copy-Paste Share Link

<!-- Share button -->
<a href="https://mydeck.c.cards/my-first-deck">
  Check out my deck
</a>

Embed a Deck

Option 1: iframe Embed

<iframe 
  src="https://mydeck.c.cards/my-first-deck" 
  width="100%" 
  height="600" 
  frameborder="0"
  allowtransparency="true">
</iframe>

Option 2: Direct Link Embed

<a href="https://mydeck.c.cards/my-first-deck" target="_blank">
  <div class="deck-preview">
    <h3>My First Deck</h3>
    <p>Click to explore</p>
  </div>
</a>

Option 3: React Component (if using React)

import { DeckEmbed } from '@/components/deck-embed'

function MyPage() {
  return (
    <DeckEmbed 
      deckId="deck-id"
      deckName="My First Deck"
      mode="sequential"
    />
  )
}

Checklist

  • [ ] Created a deck via web interface or API
  • [ ] Tested the deck link in browser
  • [ ] Shared the deck with someone
  • [ ] Embedded the deck in a page (if needed)
  • [ ] Verified cards navigate correctly
  • [ ] Tested on mobile device

Common Patterns

Create + Share Flow

// 1. Create deck
const response = await fetch('/api/create/deck', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'My Deck',
    slug: 'my-deck',
    cards: [{ text: 'Question 1' }, { text: 'Question 2' }]
  })
})

const { deck } = await response.json()

// 2. Share link
const shareLink = deck.shareable_link
console.log('Share this:', shareLink)

Embed in WordPress

<!-- Add to WordPress post/page -->
<iframe 
  src="https://mydeck.c.cards/my-first-deck" 
  width="100%" 
  height="600" 
  frameborder="0">
</iframe>

Embed in Notion

  1. Copy deck URL
  2. In Notion, type /embed
  3. Paste URL
  4. Notion will auto-embed the deck

Next Steps

Need help? → Troubleshooting Guide