API Reference

Living Images

Welcome! We're glad you're here. This guide is designed to walk you through Living Images – letting your images optimize themselves. Let's get started!

Suggest Edits

📣

Not a developer? No problem. We'll be launching a script integration you can paste into your website very soon.

Getting Started

You can either sign up through our website and get your first A/B test set up, or sign up without any preliminary setup.

To create a new A/B test, head over to the home page if you're a new user, or click Create new A/B test in the dashboard if you're an existing user.

Follow these steps:

Step 1

Input a website URL. Don't have a website? No problem, just enter any website URL. You always have the option to manually upload your image.

Step 2

Choose one of the images we fetch from your website, or upload one of your own.

Step 3

Decide if you'd like to alter the background of the image or modify the entire image. Typically, product photos are preferable for background changes, while stock photos suit full-image modifications.

Step 4

Coframe evaluates your website, the selected image, and the type of modification to generate a concept. If you're not satisfied with the initial concept, feel free to regenerate it or create a whole new prompt.

Step 5

Once you're happy with the prompt, our custom AI model will generate four different variations of your image. This process may take up to 30 seconds or longer during peak demand periods. Pick one of these images, or refresh the set as desired.

Step 6

Confirm your chosen image. Once the selection is approved, your test will become visible on your dashboard.

Integration

After test creation, you'll be able to view your images and integrate them into your website using either of the following methods: URL/API, or Script (coming soon).

⚡

Key point to note: All images served are in .webp format to minimize latency.

Integration Details

URL/API Integration

  • Difficulty: Requires coding.
  • Typical Integration Time: 10 minutes.

To integrate an A/B test, find the "See instructions" button on the test you want to integrate.

Image Integration:

You'll find a URL. Paste this URL in the location where the image would normally load.

⚠️

Certain frameworks and website builders cache images. If your tool of choice (like React or Webflow) does this, you may need to use the script method.

You can also set custom parameters in the URL to adjust the image:

  • ?w=<> (width of the image)
  • ?h=<> (height of the image)
  • ?v=<> (image variant; either "a" or "b")
  • ?version=<> (the round of the image)

We randomize the image at the server side (our CDN). We determine conversions by tracking the IP address of the viewing client, which also locks the image to that IP address. Thus, loading the image from the same IP address will always show the same image.

Tracking Conversions:

After integrating the URL, the next crucial step is setting up conversions, without which the algorithm won't function.

To log conversions, send a POST request to our endpoint from your client:

POST https://api.img.coframe.ai/api/v2/images/conversions
Content-Type: application/json

{
  "project_id": "your_project_id",
}

ℹ️

You can find your project ID in the instructions on the dashboard.

It's crucial to make this request from the client side because we link the viewed image with the client's IP address.

Script Integration

  • Difficulty: Non-technical.
  • Typical Integration Time: 2 minutes.

This method is Coming Soon!

Dashboard Features

In the dashboard, you can:

  1. Track progress: Estimate the duration until the A/B test completion.
  2. Pause A/B test: Select the ellipsis underneath the image you want to set, choose "Only show this image". This will pause the experiment, only displaying the chosen image. You can resume it by selecting "resume" on the other image.
  3. Swap images: Click the ellipsis under the image you want to swap and choose "Replace". You'll be redirected to the chat where you can either generate a new image with AI or upload one of your own.
  4. Toggle auto-approve: With auto-approve on, Coframe will auto-implement images, selecting winners each time, and learning from the process. If auto-approve is off, you'll need to check the dashboard manually, approving any new images that have been generated once the A/B test concludes.
  5. View History: You'll notice a historic record of all the images tested, and their respective conversion rates.

⚠️

Please note that after creating an account, each set of 4 image generations counts as one generation.

For support, join our Slack community.

For any custom requirements, reach out to our team at [email protected].

Updated about 2 months ago