How to Add DALL-E 3 to Your Website in 10 Minutes

Add AI image generation to any website quickly. No complex setup required.

What You'll Need

Website (HTML/CSS/JavaScript)
Imagify API key (get one free)
10 minutes

Step 1: Get Your API Key

1. Sign up at Imagify

2. Get 10 free credits

3. Copy your API key from dashboard

Step 2: Add HTML Form

Add this to your HTML:

<!DOCTYPE html>
<html>
<head>
  <title>AI Image Generator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 50px auto;
      padding: 20px;
    }
    #imageContainer {
      margin-top: 20px;
    }
    #generatedImage {
      max-width: 100%;
      border-radius: 8px;
    }
    button {
      background: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background: #0056b3;
    }
    button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <h1>AI Image Generator</h1>
  <form id="imageForm">
    <textarea 
      id="prompt" 
      placeholder="Describe the image you want to generate..."
      rows="3"
      style="width: 100%; padding: 10px; margin-bottom: 10px;"
      required
    ></textarea>
    <button type="submit" id="generateBtn">Generate Image</button>
  </form>
  <div id="imageContainer"></div>

  <script>
    // Your code here
  </script>
</body>
</html>

Step 3: Add JavaScript

Add this script before </body>:

<script>
const API_KEY = 'YOUR_API_KEY_HERE'; // Replace with your key

document.getElementById('imageForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const prompt = document.getElementById('prompt').value;
  const button = document.getElementById('generateBtn');
  const container = document.getElementById('imageContainer');
  
  if (!prompt.trim()) {
    alert('Please enter a prompt');
    return;
  }
  
  button.disabled = true;
  button.textContent = 'Generating...';
  container.innerHTML = '<p>Generating your image...</p>';
  
  try {
    const response = await fetch('https://api.imagify.ca/api/images/generate', {
      method: 'POST',
      headers: {
        'X-API-Key': API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        prompt: prompt,
        size: '1024x1024',
        style: 'standard'
      })
    });
    
    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.error || 'Failed to generate image');
    }
    
    const data = await response.json();
    
    container.innerHTML = `
      <img id="generatedImage" src="${data.url}" alt="${prompt}">
      <p><a href="${data.url}" download>Download Image</a></p>
    `;
  } catch (error) {
    container.innerHTML = `<p style="color: red;">Error: ${error.message}</p>`;
  } finally {
    button.disabled = false;
    button.textContent = 'Generate Image';
  }
});
</script>

Step 4: Test It

1. Open your HTML file in a browser

2. Enter a prompt like "A futuristic city at sunset"

3. Click "Generate Image"

4. Wait a few seconds

5. See your generated image!

Advanced: Add Options

Add size and style options:

<select id="size" style="padding: 10px; margin-bottom: 10px;">
  <option value="1024x1024">Square</option>
  <option value="1792x1024">Landscape</option>
  <option value="1024x1792">Portrait</option>
</select>

<select id="style" style="padding: 10px; margin-bottom: 10px;">
  <option value="standard">Standard</option>
  <option value="vivid">Vivid</option>
</select>

Update JavaScript:

const size = document.getElementById('size').value;
const style = document.getElementById('style').value;

body: JSON.stringify({
  prompt: prompt,
  size: size,
  style: style
})

Advanced: Multiple Images

Generate multiple images:

const generateMultiple = async (prompts) => {
  const images = await Promise.all(
    prompts.map(prompt => 
      fetch('https://api.imagify.ca/api/images/generate', {
        method: 'POST',
        headers: {
          'X-API-Key': API_KEY,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ prompt, size: '1024x1024', style: 'standard' })
      }).then(r => r.json())
    )
  );
  return images;
};

Security Note

Important: Don't expose your API key in client-side code for production. Use a backend proxy instead:

Backend Proxy (Node.js/Express)

// server.js
const express = require('express');
const axios = require('axios');
const app = express();

app.use(express.json());
app.use(express.static('public'));

app.post('/api/generate', async (req, res) => {
  try {
    const response = await axios.post(
      'https://api.imagify.ca/api/images/generate',
      req.body,
      {
        headers: {
          'X-API-Key': process.env.IMAGIFY_API_KEY,
          'Content-Type': 'application/json'
        }
      }
    );
    res.json(response.data);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(3000);

Then call your proxy instead:

const response = await fetch('/api/generate', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt, size, style })
});

Integration Examples

WordPress

Add to a page template or use a plugin:

<?php
// In your theme's functions.php or plugin
function imagify_generator_shortcode() {
  return '<div id="imagify-generator"><!-- HTML from Step 2 --></div>';
}
add_shortcode('imagify_generator', 'imagify_generator_shortcode');
?>

React Component

function ImageGenerator() {
  const [prompt, setPrompt] = useState('');
  const [image, setImage] = useState(null);
  const [loading, setLoading] = useState(false);
  
  const handleGenerate = async () => {
    setLoading(true);
    const response = await fetch('https://api.imagify.ca/api/images/generate', {
      method: 'POST',
      headers: {
        'X-API-Key': 'YOUR_API_KEY',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ prompt, size: '1024x1024', style: 'standard' })
    });
    const data = await response.json();
    setImage(data.url);
    setLoading(false);
  };
  
  return (
    <div>
      <textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} />
      <button onClick={handleGenerate} disabled={loading}>
        {loading ? 'Generating...' : 'Generate'}
      </button>
      {image && <img src={image} alt={prompt} />}
    </div>
  );
}

Troubleshooting

CORS Errors

Use a backend proxy (see Security Note above)

API Key Errors

Verify key is correct
Check key has credits
Ensure key is active

Image Not Loading

Check image URL is valid
Verify CORS settings
Check browser console for errors

Conclusion

You can add DALL-E 3 to any website in 10 minutes! For production, use a backend proxy to keep your API key secure.

Get your free API key from Imagify and start generating images on your website today!

Add DALL-E 3 to Website — 10 Min