Home Improvement

The Home Improvement widget lets your users visualize AI-generated renovations of an interior or exterior image directly on your site. Users can mark areas of the image, describe the change they want, pick a style preset, or upload their own style reference, and the widget returns a photorealistic transformation of the original image.

In order to use the Home Improvement feature, you need to add our search script to your website with the homeImprovement=true parameter.

<script> (function() { const script = document.createElement('script'); script.src = 'https://script.koral.nu/dist/index.js?searchId=11111111-2222-3333-4444-555555555555&homeImprovement=true'; document.body.appendChild(script); })(); </script>

When the script is loaded, the widget scans the page for any element marked with data-koral-home-improvement and adds a small floating “home” button in the bottom-left corner of that element. Clicking the button opens the editor modal with the element’s image already loaded as the starting point for the renovation.

The widget also installs a MutationObserver, so containers that are added to the DOM after the initial page load (for example by your own carousel or a related-products grid) get the button automatically with no extra configuration.

Setup

To enable Home Improvement on an image, place the data-koral-home-improvement attribute on the element that wraps the image. The value of the attribute is a product or asset identifier of your choice — it is sent along with each generation request so you can correlate generations with your own catalog.

<div data-koral-home-improvement="house-exterior-1">
    <img src="/images/house-exterior.webp" alt="House exterior" />
</div>

The element can either be an <img> directly or a wrapper that contains a nested <img>. The widget uses the first image source it finds inside the element as the original image for the editor.

Containers that are also marked with data-koral-related-products are intentionally skipped — those elements act as related-products placeholders, and the home improvement icon is added to the carousel items inside them instead.

Editor Features

When the modal opens, the user can:

• Draw on the image — A brush, eraser, and selection tool let the user mark the areas of the image that should be changed. The brush draws a translucent red overlay that the model uses as a mask. When at least one annotation is drawn, the prompt is automatically constrained to “only modify the marked areas”.
• Describe the change — A free-text prompt field lets the user describe what should happen (“remove all furniture”, “replace the floor with light oak”, “add a Scandinavian facade”).
• Apply a style preset — Pre-made interior and exterior styles can be applied with a single click instead of writing a prompt. See Style Presets below.
• Upload a style reference — A second image (max 5 MB) can be uploaded as a style reference. The model uses it both for aesthetic guidance (“transform the room to look like this”) and for product placement (“composite this object into the scene”).
• Composite product/interior images — Additional product or interior images can be uploaded and the model will integrate them naturally into the marked areas with realistic lighting, shadows, and perspective.
• Navigate generation history — Every generation is added to a local history stack so the user can step back and forth between earlier results.
• Pick a variation — When a style preset returns multiple variations, they appear as thumbnails the user can switch between.
• Get a price estimate — The widget can request a renovation price estimate for the result, with both a “Håndværker” (professional) and “Gør-det-selv” (DIY) breakdown, including a downloadable PDF.

Style Presets

The widget ships with a curated set of style presets, grouped into two categories:

Category	Preset	Description
Interior	ingen-mobler	Empty the room — remove all furniture, decor, and movable items
Interior	skandinavisk	New Nordic / modern summer-house aesthetic with warm light wood
Interior	japandi	Japandi / warm minimalism with muted neutrals and natural materials
Interior	lev-med-farver	”Living with colors” — Mid-century modern with bold color blocks
Exterior	moderne-facade	Modern facade with clean lines, metal, glass, and concrete
Exterior	klassisk-facade	Classic facade with brick, stone, and traditional details
Exterior	skandinavisk-facade	Scandinavian facade with vertical light wood siding
Style reference	stilreference	Used automatically when the user uploads a style reference image

Each preset expands into a detailed prompt that instructs the model to preserve the original room or building structure, perspective, and unmarked areas while transforming materials, colors, and decor to match the chosen style.

Programmatic Trigger

The widget listens for custom events on document.body, so you can open and close the editor from your own UI without going through the floating button:

// Open the editor modal for the most recently selected image
document.body.dispatchEvent(new CustomEvent('koral_hi_open'));

// Close the editor modal
document.body.dispatchEvent(new CustomEvent('koral_hi_close'));

If you want to open the editor for a specific element, the widget instance is also exposed on window.koralHomeImprovementWidget. Call handleButtonClick with the DOM element and the widget will read the image source from the element (or its first nested <img>), load it into the editor, and open the modal:

const element = document.querySelector('[data-koral-home-improvement="house-exterior-1"]');
window.koralHomeImprovementWidget?.handleButtonClick(element);

Content Moderation

Generation requests run through a content-moderation step on the server. If the user’s prompt is unrelated to home improvement, the API returns a content_violation flag and the widget shows an inline message asking the user to rephrase. No image is generated for moderated requests, so they do not consume credits.

Requirements

• The element marked with data-koral-home-improvement must contain a reachable image — either as the element itself (<img>) or as a nested <img> — that can be fetched and converted to base64.
• Generation requests can take up to two minutes; the widget aborts the request automatically after the timeout and shows an error message.