1. Include the SDK

Load the Contentdrips embed script once in your app:

<!-- Add before closing </body> tag -->
<script src="https://assets.contentdrips.com/embed.js"></script>

2. Initialize the SDK

Call init before any other method. Set a default end-user tier with plan: "free", "starter", or "pro" — maps to the corresponding Contentdrips plan. You can override it on any open() call.

await contentdrips.init({
  client_id: "your_client_id",
  email: "user@example.com",
  user_id: "unique_user_123",
  environment: "production",
  plan: "starter"
});

Alternatively pass user_package instead of plan if your stack uses numeric codes; values map to the same Contentdrips plans.

3. Set User Profile (Optional)

Pre-populate templates with user data:

contentdrips.profile.set({
  name: "John Doe",
  handle: "@johndoe",
  avatar: "https://example.com/avatar.jpg",
  website: "https://johndoe.com",
  bio: "Software Developer"
});

4. Open the Editor

Launch the modal with defaults, a template, scratch canvas, image, plan override, pre-filled content, or carousel. If you pass both plan and user_package on open(), plan wins.

contentdrips.open();

contentdrips.open({ template: 126133 });

contentdrips.open({ plan: "pro" });

contentdrips.open({
  image: "https://example.com/photo.jpg"
});

contentdrips.open({
  is_scratch: true,
  canvas_width: 1080,
  canvas_height: 1080
});

// Pre-fill text fields (labels must match template meta)
contentdrips.open({
  template: 126133,
  content_update: [
    { type: "textbox", label: "heading", value: "Hello" },
  ],
  branding: {
    name: "Jane",
    avatar_image_url: "https://example.com/a.jpg"
  }
});

// Pre-fill carousel (intro, slides, ending)
contentdrips.open({
  template: 126133,
  carousel: {
    intro_slide: { heading: "Title", description: "Sub" },
    slides: [{ heading: "Slide 1", description: "..." }],
    ending_slide: { heading: "Thanks" }
  },
});

contentdrips.open({ addWatermark: true });  

5. Handle Exported Content

Subscribe after init. Payloads include image URL strings (often data URLs). The modal closes after export by default.

contentdrips.on("image_export", function(data) {
  const imageUrl = data.image_url;
});

contentdrips.on("carousel_export", function(data) {
  const images = data.images;
});

contentdrips.close();
contentdrips.off("image_export", handler);
contentdrips.destroy();

6. Browse Templates (gallery)

Requires successful init. Filter by type, category_id, pagination, or search. The React and Vue examples render a clickable thumbnail grid — clicking any card opens the editor.

const cats = await contentdrips.templates.categories();
const result = await contentdrips.templates.list({
  type: "carousel", page: 1, per_page: 12
});
contentdrips.open({ template: result.data[0].id });

7. My Designs (Starter/Pro embed plan)

Lists designs saved for the current embed user (keyed on email / user_id from init). Clicking a card re-opens that design in the editor.

const result = await contentdrips.templates.myDesigns({ page: 1 });
// result.data — array of design objects; result.last_page for pagination
contentdrips.open({ template: result.data[0].id });

8. Template Structure (getStructure)

Before you automate content fills from a CMS, form, or AI, call getStructure to discover what labels and field types a template exposes. The response tells you exactly which content_update entries to send and whether the template supports carousel slides.

Example response

{
  "template_id": 155034,
  "name": "Retor",
  "type": "carousel",
  "width": 3240,
  "height": 1350,
  "carousel": {
    "intro_slide": { "heading": "Three ways to grow your personal brand", "description": "", "image": "" },
    "slides": [
      { "heading": "", "description": "Craft your unique identity…", "image": "" }
    ],
    "ending_slide": { "heading": "Share your thoughts in comments below", "description": "", "image": "" }
  },
  "content_update": [],
  "branding": {
    "name": "Usama Khalid",
    "handle": "@im.usamakhalid",
    "bio": "",
    "website_url": "",
    "avatar_image_url": "https://cdn.contentdrips.com/avatar.webp"
  }
}

Mapping the response to open() payloads

The carousel field shows the template's existing slide structure (intro, body slides, ending) — use it as a guide to build your own payload. For image/single-slide templates, content_update contains label objects you fill with your values. The branding field reflects the template's default branding, which you can override in open().

// Flat response — no .data wrapper
const structure = await contentdrips.templates.getStructure(155034);
const { type, carousel, content_update, branding } = structure;

// Carousel template — pass carousel object directly
if (type === "carousel") {
  contentdrips.open(({
    template: 155034,
    carousel: {
      intro_slide: { heading: "My Custom Title", description: "", image: "" },
      slides: carousel.slides.map((_, i) => (({ heading: `Point ${i + 1}`, description: "", image: "" }))),
      ending_slide: carousel.ending_slide,
    },
    branding: { ...branding, name: "Your Name" },
  });
} else {
  // Image / single template — use content_update labels
  contentdrips.open(({
    template: 155034,
    content_update: content_update.map((f) => (({ type: f.type, label: f.label, value: cms.get(f.label) })),
  });
}

9. Collections (Starter/Pro embed plan)

Groups of templates you curate in the Contentdrips embed dashboard. Render each collection as a labelled section of thumbnail cards.

const result = await contentdrips.templates.collections();
result.data.forEach((col) => {
  col.templates?.forEach((t) => {
    // render t.thumbnail; on click:
    contentdrips.open({ template: t.id });
  });
});