Skip to main content

How to Use the AI Widget Designer in Recurpay

Updated yesterday

Recurpay now offers a powerful AI-driven widget designer that allows you to build custom subscription widgets in seconds. Instead of starting from scratch, you can use AI to replicate a design you love.

Getting Started

To begin, navigate to your Recurpay dashboard and follow these steps:
Click me for a video reference guide

  1. Go to Settings > General.

  2. Scroll down to the Widget Design section.

  3. Choose a base layout for your subscription widget.

  4. Click Build with AI and click Start Your Own Design.

Generating Your Design

The AI widget feature works by analyzing visual input to create code.

  • Upload an image: You can upload a screenshot of a design you’ve seen on another site or a mockup from your design team.

  • AI Processing: The AI will automatically generate a widget that matches the layout, style, and structure of your input as closely as possible.

Customizing and Fine-Tuning

Because AI results may not always be a perfect 1:1 match, Recurpay gives you full control over the final output:

  • Preview: View the AI-generated widget instantly to see how it looks on your store.



Edit Code: Use the Edit Code option to access the widget’s source files. This allows your development team to fine-tune font sizes, specific hex color codes, spacing, and other styling details to match your exact brand requirements. Once the changes are made in the widget’s JavaScript file, you can publish the code so the updates are applied correctly to the widget.


With the AI widget feature, you get the best of both worlds: speed and flexibility. Start with an AI-generated widget that mirrors your design vision, then refine every detail to make it truly yours. Whether you’re moving fast or perfecting the last pixel, Recurpay ensures your widget fits seamlessly into your brand and delivers a polished experience for your customers.

Did this answer your question?