How To: Publish your Embeddable via a Reverse Proxy

​

Overview

1. Point your page to our proxy server (https://proxy.embeddables.com)
2. Pass the X-Embeddables-Id header with the correct Embeddable ID

​

Advantages of using a reverse proxy

• Simplicity: Unlike embedding in your site via our embed code, there is no need to set up a blank page on your site to host the Embeddable.
• Speed: The Embeddable rendered directly from our proxy server, so the extra client-side fetch from our embed code is skipped.

​

Setting up a reverse proxy

1

Point your page to our proxy server

Configure your reverse proxy to point to https://proxy.embeddables.com. This is the main endpoint that will serve your Embeddable content.For example, in Nginx:

Copy

Ask AI

location /your-reverse-proxy-page {
    proxy_pass https://proxy.embeddables.com;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

2

Verify the proxy is pointing to the correct page

Visit https://yourdomain.com/your-reverse-proxy-page in your browser. You should see content similar to what appears on https://proxy.embeddables.com.

3

Pass the correct Embeddable ID

Add the X-Embeddables-Id header to your proxy configuration. This header tells the proxy which specific Embeddable to serve.In Nginx, add this to your configuration:

Copy

Ask AI

proxy_set_header X-Embeddables-Id "your_embeddable_id";

In Apache:

Copy

Ask AI

RequestHeader set X-Embeddables-Id "your_embeddable_id"

4

Add metadata headers (optional)

You can customize the page metadata by adding these optional headers:

• X-Embeddables-Title: Sets the page title
• X-Embeddables-Description: Sets the page meta description
• X-Embeddables-Favicon: Sets the page favicon URL

5

Verify that it's working

Refresh your page at https://yourdomain.com/your-reverse-proxy-page. You should now see your specific Embeddable being served with your custom metadata.Common issues at this stage:

• Incorrect Embeddable ID
• Missing or malformed headers
• Caching issues (try clearing your browser cache)
• Propagation time (try waiting a few minutes)

​

Example Configurations

​

Apache

<Location "/your-reverse-proxy-page">
    ProxyPass https://proxy.embeddables.com
    ProxyPassReverse https://proxy.embeddables.com
    RequestHeader set X-Embeddables-Id "your_embeddable_id"
    RequestHeader set X-Embeddables-Title "Your Custom Title"
    RequestHeader set X-Embeddables-Description "Your custom description for SEO"
    RequestHeader set X-Embeddables-Favicon "https://yourdomain.com/favicon.ico"
</Location>

​

Nginx

location /your-reverse-proxy-page {
    proxy_pass https://proxy.embeddables.com;
    proxy_set_header X-Embeddables-Id "your_embeddable_id";
    proxy_set_header X-Embeddables-Title "Your Custom Title";
    proxy_set_header X-Embeddables-Description "Your custom description for SEO";
    proxy_set_header X-Embeddables-Favicon "https://yourdomain.com/favicon.ico";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

​

Common Issues

1. Content Not Loading
   • Verify your reverse proxy configuration.
   • Check that the X-Embeddables-Id header is correctly set.
   • Check that the Embeddable you’re trying to access has been pushed to production.
     • If not, then you’ll need to add the ?savvy_flow_version=latest query parameter to the URL to preview the latest version.
   • Ensure your domain’s SSL certificate is valid.
   • Clear your browser cache.
   • Wait a few minutes for propagation to take effect.
2. Wrong Content Appearing
   • Double-check the Embeddable ID.
   • Verify the proxy_pass URL is correct.
   • Clear your browser cache.