Login

Book a demo

Login

How to Set Up White-Label Prototypes in Krisspy (with Framer Integration)

Why White-Labeling Matters for Agencies

In today's fast-paced design world, agility and quick iterations are key. For agencies, maintaining consistent branding while gathering client feedback is crucial. That's why we’ve developed a white-label feature in Krisspy, allowing agencies to customize prototypes with their own branding.

This new feature enables you to:

  • Keep your agency’s branding front and center.

  • Share prototypes with clients under your own domain.

  • Gather feedback seamlessly while maintaining a professional look.

In this guide, we’ll walk you through how to set up white-labeling in Krisspy and integrate it into Framer for a fully branded client experience.

Step 1: Access Workspace Settings in Krisspy

To get started, log in to your Krisspy account and navigate to Workspace Settings:

  1. Select the workspace you want to customize.

  2. Click on Workspace settings and Go to your dashboard.

  3. Ensure you’re on an Agency Plan (required for white-label functionality).

Step 2: Customize Your Branding

Now, let’s set up your custom branding:

  1. Add your agency’s logo: This logo will appear in the top-left corner of the shared prototype link.

  2. Choose your brand colors: Customize the look to match your agency’s visual identity.

Step 3: Configure Your Custom Domain & Redirection URL

Enable the White-Label Feature: Toggle the option to activate white-labeling for your workspace.

White-labeling includes two key settings:

  1. Custom Domain:

    • This allows you to share prototypes using your own domain (e.g., https://youragency.com/prototype?uid=).

    • It replaces the default krisspy.ai URL, providing a seamless experience for your clients.

  2. Redirection URL:

    • Define where users are redirected when they click on your agency’s logo.

    • By default, it redirects to Krisspy, but you can set it to your own landing page (e.g., https://youragency.com).

Step 4: Embedding the Prototype in Framer

Now that your white-label settings are configured in Krisspy, let's integrate it into Framer. This approach will work for other platforms as well, but we’ll demonstrate it using Framer.

Create a New Page in Framer

  1. Open Framer and create a new page for your prototype.

  2. In the Layer, add a new code component

  3. In the code editor, we’ll embed the Krisspy prototype using an iframe.

Copy the code below into your Framer project:

// Krisspy Component
// Get Started: https://krisspy.ai/blog/white-label

/**
 * These annotations control how your component sizes
 * Learn more: https://www.framer.com/developers/components/auto-sizing
 *
 * @framerSupportedLayoutWidth auto
 * @framerSupportedLayoutHeight auto
 */

// Fonction pour récupérer les paramètres de l'URL
const getQueryParams = () => {
    const params = new URLSearchParams(window.location.search)
    return Object.fromEntries(params.entries())
}

export default function Iframe_with_parameter(props) {
    // This is a React component containing an iframe component
    const params = getQueryParams()
    const iframeSrc = `https://studio.krisspy.ai/share/${params.uid}?view=flow`

    return (
        <iframe
            src={iframeSrc}
            title="Embedded Content"
            style={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                border: "none",
            }}
            frameBorder="0"
            allow="clipboard-read; clipboard-write; fullscreen"
            allowFullScreen
            webkitAllowFullScreen
            mozAllowFullScreen
        />
    )
}

// Styles are written in object syntax
// Learn more: https://reactjs.org/docs/dom-elements.html#style
const containerStyle = {
    height: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
}

Understanding the Code

The function getQueryParams() extracts parameters from the URL.

  • iframeSrc dynamically builds the URL using the uid parameter, which you set in your Custom Domain configuration.

  • Adding ?view=flow to the URL is optional. It opens the prototype in an expanded view. If omitted, the default view will be used.

Step 5: Embedding and Testing

Embed this component on your Framer page.

  • Customize the uid parameter to match your custom domain settings.

  • Once set up, simply share your Framer link with clients for a fully branded experience.

Conclusion: Elevate Your Client Experience

By leveraging Krisspy’s white-label feature, you can ensure your prototypes are not only functional but also align with your agency’s brand. This seamless integration with tools like Framer allows you to present your work professionally and effectively.

Ready to take your prototyping to the next level? 🚀
Log in to Krisspy and start using the white-label feature today!

👉 Get Started Here: Krisspy Login

Thank you for choosing Krisspy! We’re here to support your journey toward faster, smarter prototyping.

Need help? Check out our dedicated support articles or reach out to our team anytime.