Stripo plugin integration: Comprehensive guide and FAQ

Stripo’s plugin provides powerful email design capabilities, making it easy for your team to create professional and visually appealing email templates without extensive coding skills. Here’s a quick overview of what you can expect from Stripo’s plugin:

• drag-n-drop editor: Easily design responsive emails by dragging and dropping pre-built blocks and saved modules;
• template storage flexibility: Store email templates either on your side or securely on Stripo’s side, depending on your integration setup;
• real-time co-editing: Collaborate seamlessly with team members simultaneously;
• custom extensions: Create and integrate your own custom email blocks and custom components (available in the Prime plan);
• simple integration: Designed as a straightforward JavaScript component for quick setup.

Integrating Stripo’s plugin smoothly is critical to ensuring your users get the best possible experience. A well-integrated plugin enhances productivity, simplifies design workflows, and allows your team to create emails that drive results effortlessly. In this guide, we’ll cover the things you need to consider when integrating Stripo’s plugin to ensure your users experience minimal disruption and maximum benefit.

Technical requirements and compatibility

Stripo’s old plugin was built as a straightforward JavaScript component, while the new plugin was built with Angular under the hood. It’s designed to be embedded into any modern web application—regardless of the framework you’re using (React, Vue, Angular, or others). It simplifies the process of designing emails by allowing you to integrate a robust email editor directly into your platform. Here’s how it technically works:

• HTML and CSS processing: When integrated, Stripo’s plugin receives and processes HTML and CSS code, enabling your users to edit email templates directly through a simple interface. After editing, it returns clean, updated code ready for immediate use.

Stripo’s plugin integrates smoothly with popular frameworks like Angular, React, and others. Whether your application uses Angular, React, or another JavaScript-based framework, compatibility isn’t a problem—Stripo is designed for flexible integration into virtually any modern web platform.

For more detailed and step-by-step instructions about plugins, you can find everything in our plugin documentation.

Integration process overview

Integrating Stripo’s plugin into your system is straightforward and quick. Here’s how the initial setup usually works:

First, your developers identify and prepare specific “div” areas within your application where the Stripo editor will live. After these areas are set, the plugin is initialized through simple JavaScript. Once initialized, the Stripo editor seamlessly embeds into your selected section, instantly providing users with a powerful email-editing experience.

It’s helpful to understand the key differences between the old and new versions of Stripo’s plugin, especially regarding data handling:

• old plugin: Previously, the editor operated without a structured internal model. It worked directly with raw HTML and CSS, treating them simply as text. This approach, while functional, had limitations: Different browsers could render the same code differently, and browser extensions could unintentionally alter the content during editing. These issues sometimes affected the reliability and visual consistency of email templates;
• new plugin: The new plugin introduces a data-driven model that is created for each email template during the first initialization. Instead of working with raw code as plain text, Stripo now generates and manages a structured model behind the scenes. This ensures consistent rendering across browsers, protects template code from unwanted interference (e.g., by browser extensions), and unlocks advanced features, such as real-time co-editing and in-editor commenting.

The new plugin introduces several major improvements to enhance your email editing experience:

1. Desktop and mobile views: Effortlessly preview and edit emails optimized specifically for desktop and mobile devices right within the editor.
2. Real-time co-editing: Collaborate seamlessly in real time, allowing multiple users to work together on email templates simultaneously.
3. Simplified database management: With Stripo managing the storage of HTML and CSS, your internal database workload is significantly reduced, freeing your team to focus on higher-priority tasks.

Ensuring a smooth transition relies heavily on accurately transferring the initial HTML/CSS data to Stripo during the first setup. This initial step is crucial because Stripo uses this data as the base version. Afterward, your templates will always remain accessible and synchronized, eliminating the need for repetitive manual updates.

Migration from old to new plugin

Moving from the old Stripo plugin to the new one is simpler than you might think. We’ve streamlined the process to ensure your transition is as smooth as possible.

Transition steps

Migrating from the old plugin to the new one requires several technical updates on your side. It’s not just about switching the UI—the integration logic also changes. Here’s what needs to be adjusted:

1. Plugin embedding: In the new version, the editor is embedded using a single container <div>, instead of two separate containers as required previously. This simplifies the embedding process.
2. Initialization call: The way you initialize the plugin has changed. The function call structure is different, and it now includes new parameters essential for correct plugin behavior.
3. Authentication logic: A userId parameter is now mandatory when initializing the plugin. If your old integration didn’t include user-level identification, you’ll need to update your authentication process accordingly.
4. HTML export and saving: Functions used to retrieve and save HTML (compiled or raw) have changed. The new plugin uses updated API methods, and you’ll also need to reconfigure how autosave is triggered and handled.
5. Custom extensions (if applicable): If you’ve built custom blocks or extensions for the old plugin, you’ll need to adapt or rewrite them using the updated documentation and structure designed for the new plugin.
6. Initialization method: Update your system’s initialization process to send only the email ID for subsequent edits. From then on, Stripo will automatically handle HTML and CSS retrieval.

Client-side customizations and flexibility

Stripo’s plugin is highly customizable, giving you complete control over how it looks and functions within your platform. You can easily adjust the design, tailor functionality, and even override styles with your own CSS, making the editor feel like an integrated part of your system.

The extent of customization available

You have significant flexibility to adjust the plugin to your brand or design preferences. Using custom CSS, your developers can modify colors, fonts, button styles, and layout elements—allowing seamless visual integration with your existing UI. Functionality-wise, you can selectively enable or disable features based on your users’ needs and your subscription level.

Handling product redesigns

When you decide to redesign your product or platform, adapting the Stripo plugin is straightforward. Because the editor is delivered as an embeddable component, your team can easily update its appearance and configuration to match your platform’s design—regardless of the technology stack you’re using. You can modify the visual elements through CSS or minor JavaScript adjustments, ensuring the editor continues to match your updated design without requiring extensive redevelopment.

Custom block addition and removal

The availability and flexibility of adding or removing custom blocks depend heavily on your subscription plan:

• Free/Basic plans: Users can remove or disable default blocks, but adding custom blocks isn’t available;
• Prime plan: Clients have full flexibility to create and integrate their own custom extensions, dramatically expanding the editor’s capabilities to fit unique needs.

Development of custom extensions

It’s important to understand that creating and managing custom extensions is your team’s responsibility. While Stripo provides documentation and guidance, your developers will need to build, test, and maintain these custom blocks. This gives your team full control but also requires internal resources to manage effectively.

Key challenges in plugin integration

Let’s take a look at some common challenges that should be considered to ensure a smooth transition.

Developer experience and resources

One of the primary factors affecting the integration process is the skill level and availability of your development team. However, if your resources are limited or specialists are less experienced, you might encounter delays. Allocating sufficient developer resources early on can help speed things up and prevent bottlenecks.

Custom extensions compatibility

Many clients rely on custom extensions—specialized blocks uniquely designed to fit their specific needs. While full custom block compatibility is in active development for the new Stripo plugin, Prime users can already begin preparing for integration by updating their custom blocks. Stripo’s team is actively working to deliver full support for custom extensions soon, ensuring a smooth and successful transition.

Upcoming solutions and timeline

We’re aware of this critical limitation, and our developers are actively working to introduce complete custom extension support by the end of Q2. We expect these enhancements to be ready around late June or early July, which will allow seamless integration for even our most advanced users.

Client-side responsibilities

It’s important to know that while Stripo will enable custom block support, your team will be responsible for adapting existing custom blocks to the new plugin. The new plugin introduces slight technical differences, meaning your developers will need to update or rewrite your custom extensions accordingly. While this requires additional effort, it ensures each block functions correctly and provides the best possible experience in the new system.

Testing and quality assurance

When integrating or migrating to the new Stripo plugin, rigorous testing isn’t just recommended—it’s essential. Thorough testing ensures that your users won’t face any disruptions and that the plugin will integrate seamlessly with your existing systems. Skipping or rushing this step can lead to unexpected issues down the line, negatively impacting user experience.

Setting up dedicated testing environments

The best way to ensure a smooth transition is to set up dedicated testing environments. Here’s what we recommend:

• separate environments: Use dedicated test plugins and separate environments from your production setup. This allows your team to safely test integrations, identify potential bugs, and address them before going live;
• realistic scenarios: Test with realistic scenarios and email templates that closely resemble your real-world usage. This practice helps catch edge cases that might otherwise go unnoticed;
• continuous feedback loop: Encourage continuous feedback from your testers or early users to quickly address any issues and fine-tune performance.

Stripo’s support for testing

At Stripo, we understand how important testing is, which is why we actively support your quality assurance efforts:

• if you’re on the Prime plan, we provide additional testing plugin environments at no extra cost;
• these environments mirror your main setup, allowing your developers to freely test new integrations or updates without risking disruption to your active production environments.

Ongoing technical support during the entire integration process

When integrating and using Stripo’s plugin, you’re never left to figure things out alone. Stripo offers comprehensive, ongoing support to help you resolve issues quickly and efficiently, keeping your email design processes running smoothly.

Stripo’s technical support channels

We provide several convenient channels for support, ensuring you always have the assistance you need:

• dedicated meetings: Prime clients benefit from personalized technical meetings with our developers. These scheduled sessions ensure that complex issues receive immediate, expert attention. In addition, we often create shared Slack channels between your team and ours, enabling real-time communication and ultra-fast support. This direct line significantly speeds up the resolution of technical questions and integration tasks;
• chat support: Instant chat support is available from Monday to Friday, from 8 AM to midnight. Quick questions and issues can typically be resolved within minutes through our live chat;
• email support: If your inquiry isn’t urgent or requires a detailed investigation, you can always reach our support team via email. We respond quickly and thoroughly, typically within the same business day.

When direct developer assistance is needed

In some scenarios, direct involvement from Stripo’s developers might be necessary, such as:

• complex integration issues or troubleshooting that standard documentation or support can’t resolve;
• questions related to the development and functionality of custom blocks or extensions;
• technical challenges during major plugin updates, integration, or migrations.

In these cases, our support team arranges direct communication with developers, ensuring your challenges are addressed by experts familiar with every technical detail.

Continuous lifecycle support

Our technical support doesn’t stop after your initial integration. Stripo remains your partner throughout your entire usage lifecycle. From initial setup and troubleshooting to ongoing upgrades and enhancements, our team is always available to provide support and guidance. We proactively help you navigate changes, updates, and any technical questions that arise, so you’re always getting the most out of our plugin.

With Stripo, you get more than just a powerful email editing plugin—you gain a supportive technical team committed to your ongoing success.

Managing updates and bug fixes

When it comes to managing updates and bug fixes with the Stripo plugin, you have two main options: automatic updates or manual version control. Each has its own benefits, depending on your team’s preferences and operational requirements.

Automatic vs. manual updates

Automatic updates (“latest” version)

By choosing automatic updates, you’ll always be using Stripo’s latest plugin version. When we roll out a fix or improvement, your system will update immediately, without any extra steps from your team. This approach ensures your users quickly benefit from bug fixes, new features, and general improvements, minimizing downtime and maintenance.

Manual version control

If your team prefers more control, you can manually manage updates. This involves specifying the exact plugin version number you wish to use. With this method, updates happen only when your developers decide they will. This allows your team to thoroughly test new versions before applying them, reducing the chance of unexpected issues.

Advantages and considerations for automatic updates

Pros

• immediate access to new features and critical bug fixes;
• reduced maintenance workload for your developers;
• always running the most optimized, secure version.

Cons

• slight risk of unforeseen issues if your environment has specific customizations or unique dependencies;
• requires trust in Stripo’s continuous delivery process.

Immediate visibility of bug fixes and updates

When using automatic updates (“latest”), any improvements or bug fixes we release are instantly applied. Your users immediately see these changes without interruption. If you’re manually updating, you’ll first need to verify and apply the update to benefit from new fixes and enhancements.

In short, automatic updates provide convenience and speed, while manual control gives your team additional oversight. Choose what works best for your workflow.

Editor load speed and hosting considerations

Another common question, especially from clients located outside of Europe, is whether it’s possible to speed up the editor’s loading time. By default, the Stripo plugin assets are hosted on AWS servers in Ireland. For users accessing the editor from distant regions (such as Asia or South America), initial loading times may vary depending on local internet speed and network latency, sometimes taking 4 to 8 seconds.

If fast loading is a critical requirement, you can improve performance by self-hosting the editor’s frontend assets. We provide public access to the plugin files on GitHub, allowing you to:

• download a specific plugin version from our GitHub repository;
• host those files on your own CDN, closer to your user base;
• replace the default plugin script with your custom-hosted one.

This approach puts you in full control of asset delivery and can significantly reduce loading times for end users in remote regions.

Wrapping up

Successfully integrating Stripo’s plugin into your platform relies on clear communication, structured processes, and proactive testing. By following the best practices outlined in this guide, you’ll ensure a seamless user experience, minimal downtime, and smoother operations overall.

Proactive collaboration between your team and Stripo’s developers is crucial. Regular, open communication helps to quickly identify and solve any issues, making the integration process simpler and more effective. When you actively engage with Stripo’s support channels, you get faster solutions and better results.

Key takeaways

• preparation and planning: Start with clearly defined integration and migration plans;
• testing: Use dedicated environments to catch and resolve issues early;
• customizations: Leverage flexible customization options, remembering that custom blocks require internal developer resources;
• updates: Choose the update strategy (automatic or manual) that best aligns with your operational needs;
• support: Rely on Stripo’s robust technical support channels throughout the plugin lifecycle.