Using an Iframe

This document explains how to embed the Mypixia widget into your HTML pages using an iframe. This approach can be useful for sandboxing the widget and isolating it from your main application's JavaScript environment.

Basic HTML Integration with Iframe

To embed the Mypixia widget using an iframe, include the following code snippet in your HTML file:

<!DOCTYPE html>
<html>
<head>
  <title>Mypixia Widget Example (Iframe)</title>
</head>
<body>
  <iframe
    src="https://cdn.mypixia.com/widget.html?apiKey=YOUR_API_KEY_HERE&productName=Premium%20T-Shirt&productCategory=Apparel&mainImage=https://example.com/tshirt.png"
    width="100%"
    height="600px"
    frameborder="0">
  </iframe>
</body>
</html>

Explanation:

<iframe src="...">: This is the iframe element that will load the Mypixia widget.
src: The src attribute points to the URL where the Mypixia widget is hosted.
Replace YOUR_API_KEY_HERE with your actual API key.
The URL includes parameters for product details: productName, productCategory, and mainImage. Make sure to URL-encode any special characters in these values.
width: Sets the width of the iframe.
height: Sets the height of the iframe. Ensure it's sufficient to display the entire widget.
frameborder: Removes the border around the iframe.

Integration with Backend Technologies

Java (Spring)
Python (Flask)
ASP.NET (C#)
Ruby on Rails
PHP

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class MypixiaWidgetController {

@Value("${mypixia.api.key:YOUR_API_KEY_HERE}") // Default value if not in properties
private String apiKey;

@Value("${product.name:Premium T-Shirt}")
private String productName;

@Value("${product.category:Apparel}")
private String productCategory;

@Value("${product.mainImage:https://example.com/tshirt.png}")
private String mainImage;

@GetMapping("/mypixia-iframe")
public String mypixiaIframe(Model model) {
model.addAttribute("apiKey", apiKey);
model.addAttribute("productName", productName);
model.addAttribute("productCategory", productCategory);
model.addAttribute("mainImage", mainImage);
return "mypixia-iframe"; // mypixia-iframe.html
}
}

mypixia-iframe.html (Thymeleaf example):

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Mypixia Widget Example (Spring Iframe)</title>
</head>
<body>
<iframe
    th:src="@{'https://cdn.mypixia.com/widget.html?apiKey=' + ${apiKey} +
           '&productName=' + ${productName} +
           '&productCategory=' + ${productCategory} +
           '&mainImage=' + ${mainImage}}"
    width="100%"
    height="600px"
    frameborder="0">
</iframe>
</body>
</html>

Explanation:

The Spring code uses a @Controller to handle the request and pass the API key and product details to the view.
@Value annotations inject the API key and product details from the application properties or use default values if not found.
Thymeleaf (or another templating engine) is used to dynamically construct the iframe's src attribute with the injected values.

from flask import Flask, render_template
import os
import urllib.parse

app = Flask(__name__)

@app.route('/')
def index():
api_key = os.environ.get('MYPIXIA_API_KEY', 'YOUR_API_KEY_HERE')
product_name = "Premium T-Shirt"
product_category = "Apparel"
main_image = "https://example.com/tshirt.png"

# URL encode the product details
product_name_encoded = urllib.parse.quote_plus(product_name)
product_category_encoded = urllib.parse.quote_plus(product_category)
main_image_encoded = urllib.parse.quote_plus(main_image)

return render_template('index-iframe.html', api_key=api_key,
product_name=product_name_encoded,
product_category=product_category_encoded,
main_image=main_image_encoded)

if __name__ == '__main__':
app.run(debug=True)

index-iframe.html:

<!DOCTYPE html>
<html>
<head>
    <title>Mypixia Widget Example (Flask Iframe)</title>
</head>
<body>
<iframe
    src="https://cdn.mypixia.com/widget.html?apiKey={{ api_key }}&productName={{ product_name }}&productCategory={{ product_category }}&mainImage={{ main_image }}"
    width="100%"
    height="600px"
    frameborder="0">
</iframe>
</body>
</html>

Explanation:

The Flask code retrieves the API key from an environment variable and defines product details.
urllib.parse.quote_plus() is used to URL-encode the product details.
The render_template function passes the API key and URL-encoded product details to the HTML template.
The {{ ... }} expressions inject the values into the iframe's src attribute.

using Microsoft.AspNetCore.Mvc;
using System;
using System.Web;

namespace MypixiaWebApp.Controllers
{
    public class HomeController : Controller
{
    public IActionResult Index()
{
    string apiKey = Environment.GetEnvironmentVariable("MYPIXIA_API_KEY") ?? "YOUR_API_KEY_HERE";
    string productName = "Premium T-Shirt";
    string productCategory = "Apparel";
    string mainImage = "https://example.com/tshirt.png";

    ViewBag.ApiKey = apiKey;
    ViewBag.ProductName = HttpUtility.UrlEncode(productName);
    ViewBag.ProductCategory = HttpUtility.UrlEncode(productCategory);
    ViewBag.MainImage = HttpUtility.UrlEncode(mainImage);

    return View();
}
}
}

Index.cshtml:

<!DOCTYPE html>
<html>
<head>
    <title>Mypixia Widget Example (ASP.NET Iframe)</title>
</head>
<body>
<iframe
    src="https://cdn.mypixia.com/[email protected]&[email protected]&[email protected]&[email protected]"
    width="100%"
    height="600px"
    frameborder="0">
</iframe>
</body>
</html>

Explanation:

The C# code retrieves the API key from an environment variable and defines product details.
HttpUtility.UrlEncode() is used to URL-encode the product details.
The @ViewBag... expressions inject the API key and URL-encoded product details into the iframe's src attribute within the Razor view.

# Ruby code (e.g., in a controller)
require 'uri'

def index
@api_key = ENV['MYPIXIA_API_KEY'] || 'YOUR_API_KEY_HERE'
@product_name = "Premium T-Shirt"
@product_category = "Apparel"
@main_image = "https://example.com/tshirt.png"

@product_name_encoded = URI.encode_www_form_component(@product_name)
@product_category_encoded = URI.encode_www_form_component(@product_category)
@main_image_encoded = URI.encode_www_form_component(@main_image)
end

ERB Template (.erb):

<!DOCTYPE html>
<html>
<head>
    <title>Mypixia Widget Example (Rails Iframe)</title>
</head>
<body>
<iframe
    src="https://cdn.mypixia.com/widget.html?apiKey=<%= @api_key %>&productName=<%= @product_name_encoded %>&productCategory=<%= @product_category_encoded %>&mainImage=<%= @main_image_encoded %>"
    width="100%"
    height="600px"
    frameborder="0">
</iframe>
</body>
</html>

Explanation:

The Ruby code retrieves the API key from an environment variable and defines product details.
URI.encode_www_form_component() is used to URL-encode the product details.
The <%= ... %> expressions inject the API key and URL-encoded product details into the iframe's src attribute within the ERB template.

<?php
  $apiKey = getenv('MYPIXIA_API_KEY') ?: 'YOUR_API_KEY_HERE';
  $productName = "Premium T-Shirt";
  $productCategory = "Apparel";
  $mainImage = "https://example.com/tshirt.png";

$productNameEncoded = urlencode($productName);
$productCategoryEncoded = urlencode($productCategory);
$mainImageEncoded = urlencode($mainImage);
?>
<!DOCTYPE html>
<html>
<head>
    <title>Mypixia Widget Example (PHP Iframe)</title>
</head>
<body>
<iframe
    src="https://cdn.mypixia.com/widget.html?apiKey=<?php echo $apiKey; ?>&productName=<?php echo $productNameEncoded; ?>&productCategory=<?php echo $productCategoryEncoded; ?>&mainImage=<?php echo $mainImageEncoded; ?>"
    width="100%"
    height="600px"
    frameborder="0">
</iframe>
</body>
</html>

Explanation:

The PHP code retrieves the API key from an environment variable and defines product details.
urlencode() is used to URL-encode the product details.
The <?php echo ...; ?> expressions inject the API key and URL-encoded product details into the iframe's src attribute.

Security Considerations

Never hardcode your API key directly in your HTML or JavaScript code.
Use environment variables to store your API key and retrieve it at runtime.
For production environments, consider passing the API key from your server to the client.
Implement appropriate security measures to protect your API key from unauthorized access.
When passing data to the iframe via the URL, ensure that the data is properly URL-encoded to prevent injection vulnerabilities.

By following these guidelines, you can easily integrate the Mypixia widget into your HTML pages using an iframe and leverage its powerful design capabilities while maintaining a secure environment.

Basic HTML Integration with Iframe​

Integration with Backend Technologies​

Security Considerations​

Basic HTML Integration with Iframe

Integration with Backend Technologies

Security Considerations