v1.0.0

Contentdrips Embed SDK

Integrate powerful content creation into your application

Try the Integration

Integration Guide

1. Include the SDK

Add the Contentdrips embed script to your HTML:

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

2. Initialize the SDK

Initialize with your client credentials. The email will be sent to the canvas via the setup event:

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

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 Contentdrips editor modal with various options:


contentdrips.open();


contentdrips.open({
  template: 126133   
});


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


contentdrips.open({
  is_scratch: true    
});


contentdrips.open({
  canvas_width: 800,   
  canvas_height: 600  
});


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


contentdrips.open({
  user_package: 2   
});


contentdrips.open({
  addWatermark: true   
});

5. Handle Exported Content

Listen for exported images and carousels:


contentdrips.on("image_export", function(data) {
  const imageUrl = data.image_url;  
  console.log("Image exported:", imageUrl);
  
  
  document.getElementById("myImage").src = imageUrl;
});


contentdrips.on("carousel_export", function(data) {
  const images = data.images;  
  console.log("Carousel exported:", images.length, "slides");
  
  
  images.forEach((src, index) => {
    const img = document.createElement("img");
    img.src = src;
    container.appendChild(img);
  });
});

API Reference

contentdrips.init(options)

Initialize the SDK. Must be called before any other method.

Options: client_id (required), email (required), user_id, environment

contentdrips.profile.set(profileData)

Set user profile data for template personalization.

Options: name, handle, avatar, website, bio

contentdrips.open(options?)

Open the editor modal with optional configuration.

Options: template, image, is_scratch, canvas_width, canvas_height, user_package, addWatermark (Pro only)

contentdrips.close()

Programmatically close the editor modal.

contentdrips.on(event, handler)

Subscribe to events: image_export, carousel_export

contentdrips.off(event, handler)

Unsubscribe from events.

Open Options Reference

template- Template ID to load (number)

image- Image URL to add to canvas (string)

is_scratch- Start with blank canvas (boolean, default: false)

canvas_width- Custom canvas width in pixels (number)

canvas_height- Custom canvas height in pixels (number)

user_package- Override user package level 0-4 (Pro plan only - will throw error on Free plan)

addWatermark- Add watermark to exports (Pro plan only - will throw error on Free plan)

Export Event Data Structure

image_export event:

{
  event: "image_export",
  image_url: "data:image/png;base64,..."  
}

carousel_export event:

{
  event: "carousel_export",
  images: [                        
    "data:image/png;base64,...",
    "data:image/png;base64,...",
    ...
  ]
}

ContentDrips