How to Avoid the 404 Error When Embedding Our Widget 

If you're looking to add our widget to your website, here’s the simple code you need to embed it:

Or you can visit this guide for more details on how to add it.

<script>
  var ps_config = {
    workspace_id : "8cd78b29-ae75-4041-a9df-6184a2e8df2"
  };
</script>
<script type="text/javascript" src="https://cdn.loopedin.io/js/widget.min.js?v=0.8" defer="defer"></script>

However, you might run into an issue where the widget doesn't load correctly, and you see a 404 error related to the /cdn-cgi/challenge-platform URL. This issue can happen because of a security feature that Cloudflare uses, a service that helps us protect websites from malicious activity.

Why is this Happening?

Cloudflare helps protect our websites by adding an extra security check. When the widget tries to load, Cloudflare might ask for a verification (like a challenge), thinking that the request is coming from an unfamiliar source. This can block the widget from loading correctly, causing the 404 error.

The Solution: Redirect Rule

To fix this, you'll need to add a redirect rule to your hosting platform. This rule tells Cloudflare how to handle requests coming to the /cdn-cgi/challenge-platform URL.

General Solution

To resolve this issue, you need to set up a redirect that ensures requests to /cdn-cgi/challenge-platform/ are properly forwarded to https://cdn.loopedin.io/cdn-cgi/challenge-platform/. The method varies depending on your hosting provider.

Here’s some examples how to set it up on different platforms:

1. Netlify

In Netlify, you can create a _redirects file in the public directory (or dist directory for some frameworks) with the following content:

/cdn-cgi/challenge-platform/*  https://cdn.loopedin.io/cdn-cgi/challenge-platform/:splat  200

This will ensure Cloudflare doesn't block the request and the widget loads smoothly.

2. Vercel

For Vercel, you can add the redirect in the vercel.json configuration file like this:

{
  "rewrites": [
    {
      "source": "/cdn-cgi/challenge-platform/(.*)",
      "destination": "https://cdn.loopedin.io/cdn-cgi/challenge-platform/$1"
    }
  ]
}

This will make sure the request is properly rewritten and the widget functions correctly.

3. AWS S3/CloudFront

If you're hosting your site using AWS S3 and CloudFront, you can configure a CloudFront URL rewrite in the CloudFront distribution settings. In the CloudFront settings, you can add a behavior to rewrite requests to the appropriate path.

• CloudFront Behavior: Set up a URL path pattern /cdn-cgi/challenge-platform/* and configure it to forward to https://cdn.loopedin.io/cdn-cgi/challenge-platform/:splat.

4. Heroku

For Heroku, you can use a Procfile with the following configuration to create a redirect rule:

heroku config:set REDIRECT_URL="https://cdn.loopedin.io/cdn-cgi/challenge-platform/:splat"

Then, create a middleware to handle the redirect or use a platform-specific addon for URL management.

5. GitHub Pages

For GitHub Pages, you would typically use a .nojekyll file along with an index.html redirect or a custom JavaScript redirect. However, setting up direct redirects might be more difficult compared to other platforms.

6. DigitalOcean

In DigitalOcean, you can set up redirects through a nginx configuration file if you're using their App Platform or a custom setup with nginx:

# Proxy the /cdn-cgi/challenge-platform route
location /cdn-cgi/challenge-platform/ {
    proxy_pass https://cdn.loopedin.io/cdn-cgi/challenge-platform/;
    proxy_ssl_server_name on;  # ✅ This is critical for HTTPS targets
    proxy_set_header Host cdn.loopedin.io;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

7. Other Platforms

If you're using other platforms like Firebase Hosting, Surge, or Render, the approach will be similar, where you'll configure the platform's URL rewriting or redirect rules.

By adding this redirect rule, Cloudflare will know exactly how to handle the widget requests and prevent errors, allowing everything to work smoothly.

So don't worry, this is a common step, and adding the redirect rule is all you need to do to fix it.