Integrations

Overview

The Stripo Extensions SDK provides a powerful integration system that allows you to replace or extend built-in editor components with your own implementations. Instead of using Stripo's default UI for common tasks like selecting images, videos, or managing dynamic content, you can seamlessly integrate your own systems, libraries, and services directly into the editor workflow.

These integrations maintain the native look and feel of the editor while giving you complete control over:

• Data sources (your CMS, DAM, or third-party APIs)
• User interface and experience
• Business logic and validation rules
• Access control and permissions

Integration Types

The SDK supports the following integration types:

External Image Library

Replace Stripo's default image gallery with your own image management system or media library.

Use Cases:

• Connect to your Digital Asset Management (DAM) system
• Integrate with brand-approved image libraries
• Implement custom search, filtering, and organization
• Enforce image compliance and approval workflows
• Track image usage and analytics

When to Use:

• You have an existing media library or DAM system
• You need to enforce specific image selection rules
• You want to provide curated, brand-approved images
• You require custom metadata or tagging systems

Full Example Implementation: How to Integrate an External Image Library

API Reference: ExternalImageLibrary

---

External Video Library

Override the default video input and provide your own video selection experience.

Use Cases:

• Connect to your video hosting platform or CMS
• Integrate with branded video libraries
• Implement custom video preview and selection UI
• Control which videos are available for email campaigns
• Manage video metadata and thumbnails

When to Use:

• You host videos on your own platform
• You need to maintain a curated video library
• You want custom video player settings or fallbacks
• You require specific thumbnail generation logic

Full Example Implementation: How to Integrate an External Video Library

API Reference: ExternalVideosLibrary

---

External Smart Elements Library

Enhance Smart Elements with your own catalog of dynamic content such as products, articles, destinations, or any other data-driven content.

Use Cases:

• Connect product catalogs from your e-commerce platform
• Integrate blog posts or news articles from your CMS
• Provide dynamic content from your database
• Implement custom filtering and search for content items
• Sync real-time data with email templates

How It Works: Stripo handles the layout and rendering of Smart Elements, while your integration controls what data gets inserted. This means you don't need to rebuild the Smart Elements logic—just provide the data structure.

When to Use:

• You have a product catalog, CMS, or content database
• You need real-time or personalized content in emails
• You want to maintain a single source of truth for content
• You require custom content selection workflows

Full Example Implementation: How to Integrate an External Smart Elements Library

API Reference: ExternalSmartElementsLibrary

---

External AI Assistant

Replace the default AI Assistant with your own AI-powered solution for content improvement and generation.

Use Cases:

• Integrate with your preferred AI service (OpenAI, Claude, custom LLM)
• Implement brand-specific tone of voice and style guidelines
• Provide industry-specific content suggestions
• Control AI behavior and prompt engineering
• Add custom content validation and compliance checks

When to Use:

• You have specific AI service requirements or preferences
• You need to align AI output with brand guidelines
• You want to implement custom prompts or workflows
• You require content compliance or review processes

Full Example Implementation: How to Integrate an External AI Assistant

API Reference: ExternalAiAssistant

---

External Display Conditions Library

Extend or override the default Display Conditions configuration with your own conditional visibility system.

Use Cases:

• Integrate with your marketing automation platform
• Connect to CRM data for personalization rules
• Implement custom audience segmentation logic
• Provide pre-defined condition templates
• Sync visibility rules across multiple systems

How It Works: Your integration provides the UI and logic for defining conditions, while Stripo handles the rendering and export based on those conditions. This allows you to maintain complex conditional logic in your own system.

When to Use:

• You have existing segmentation or personalization rules
• You need to sync conditions with external systems
• You want to provide user-friendly condition builders
• You require custom condition types beyond Stripo's defaults

Full Example Implementation: How to Integrate External Display Conditions

API Reference: ExternalDisplayConditionsLibrary

---

External Merge Tags Selector

Override the default merge tag selector and connect your own system or catalog of personalization variables.

Use Cases:

• Connect to your CRM or marketing platform's personalization fields
• Provide custom-defined merge tags specific to your application
• Implement dynamic placeholders managed outside of Stripo
• Control which personalization variables are available to users
• Organize merge tags by categories or user permissions

How It Works: When the merge tags selector is clicked, your modal opens with your catalog of personalization variables. Once a user selects a tag, your integration returns it via callback, and Stripo inserts it at the current cursor position.

When to Use:

• You have custom personalization fields in your system
• You need to integrate CRM-specific data fields
• You want to provide account-specific or context-aware merge tags
• You require custom organization or categorization of variables

Full Example Implementation: How to Integrate External Merge Tags

---

External Custom Font

Enable users to add custom fonts directly inside the editor by providing their own font management interface.

Use Cases:

• Allow users to add brand-specific fonts
• Integrate with external font libraries (Google Fonts, Adobe Fonts, etc.)
• Connect to your design system's typography settings
• Enable on-the-fly font customization for templates

How It Works: A new Custom tab appears in the Font Family dropdown with a "+ Insert custom font" button. When clicked, your modal opens where users define the font name, CSS declaration, and URL. Once confirmed, the font parameters are returned via callback, and the font becomes immediately available in the dropdown.

When to Use:

• You want to give users control over font selection
• You need to integrate with external font services
• You have brand-specific fonts that need to be dynamically loaded

Full Example Implementation: How to Integrate External Custom Font

Integration Architecture

All integrations follow a consistent pattern:

1. Registration: Register your integration implementation when building your extension
2. Trigger: The editor displays a custom button or UI element when users interact with the relevant feature
3. Callback: Your integration opens a custom modal, dialog, or interface
4. Data Return: The user makes a selection, and your integration returns the data via callback
5. Editor Update: Stripo automatically updates the template with the returned data

This architecture ensures:

• Seamless UX: Users experience a consistent workflow within the editor
• Full Control: You control the selection interface and data validation
• Easy Integration: Standard callback patterns make implementation straightforward
• Flexibility: Use any UI framework or technology for your modals