The World's First Contextual Real-Time Quiz

Learn More

Embed

Home / Embed
TriviaTrap.Net

Embed TriviaTrap.Net on Your Website

Copy and Paste the code below into the body of your site where you want the quiz to appear. For best results place the quiz Above the Fold.
To embed an iframe with the current page title as the subject of the quiz, use the following code:

<script>
document.addEventListener('DOMContentLoaded', function () {
    function getParentTitle() {
        return encodeURIComponent(document.title);
    }

    function getParentDomain() {
        return encodeURIComponent(window.location.hostname);
    }
    function getMainDomain(host) {
        const parts = host.split(".");
        const count = parts.length;

        if (count > 2) {
          // Return the last two parts (main domain)
          return (parts[count - 2]) + '.' + (parts[count - 1]);
        } else if (count === 2) {
          // Already a main domain
          return host;
        }
        return null; // Invalid host
      }

    let iframes = document.getElementsByClassName('iframe-class');
    let title = getParentTitle();
    let domain = getParentDomain();
    domain = getMainDomain(domain);
    let linkSuffix = "store-mcqs"; // Default link suffix

    const apiUrl1 = "https://api.triviatrap.net/v1/custom-ads?domain=" + domain;

    fetch(apiUrl1)
        .then(function(response) {
            return response.json();
        })
        .then(function(response) {
            if (response.httpCode === 200 && response.payload.length > 0) {
                let positionMap;
                if(response.payload[0].size == 250){
                    positionMap = {
                        right: "store-mcqs-right",
                        top: "store-mcqs-top-250",
                        left: "store-mcqs-left",
                        bottom: "store-mcqs-bottom-250"
                    };
                }else{
                    positionMap = {
                        top: "store-mcqs-top-50",
                        bottom: "store-mcqs-bottom-50"
                    };
                }
                linkSuffix = positionMap[response.payload[0].position];
            }
            console.log(linkSuffix);

            // Set iframe sources based on linkSuffix
            for (let i = 0; i < iframes.length; i++) {
                let link = "https://triviatrap.net/" + linkSuffix + "?content=" + title + "&domain=" + domain;
                iframes[i].src = link;

                // Adjust iframe dimensions based on linkSuffix
                if (linkSuffix === "store-mcqs-top-50" || linkSuffix === "store-mcqs-bottom-50") {
                    iframes[i].style.height = "250px";
                    iframes[i].style.width = "300px";
                } else if (linkSuffix === "store-mcqs-left" || linkSuffix === "store-mcqs-right") {
                    linksuffix_mob = linkSuffix === "store-mcqs-left" ? "store-mcqs-top-250" : "store-mcqs-bottom-250";
                    linkSuffix = window.innerWidth < 756 ? linksuffix_mob : linkSuffix;
                    iframes[i].style.height = "250px";
                    iframes[i].style.width = "650px";
                    if (window.innerWidth < 756) {
                        iframes[i].style.width = "300px";
                        iframes[i].style.height = "500px";
                    }
                } else if (linkSuffix === "store-mcqs-top-250" || linkSuffix === "store-mcqs-bottom-250") {
                    iframes[i].style.height = "500px";
                    iframes[i].style.width = "300px";
                }
            }
        })
        .catch(function() {
            console.error("Failed to fetch ad block status.");

            // Set iframe sources with default suffix if API call fails
            for (let i = 0; i < iframes.length; i++) {
                let position = iframes[i].getAttribute("data-position"); // Get position from data attribute
                let link = "https://triviatrap.net/" + linkSuffix + "?content=" + title + "&domain=" + domain;
                iframes[i].src = link;
                iframes[i].style.height = "250px";
                iframes[i].style.width = "300px";
            }
        });
});
</script>
<iframe class="iframe-class" allowTransparency="true" style=" width: 300px; height:250px; background: transparent;border: none;"></iframe>
`
shape-1

Embed TriviaTrap.Net using custom tags


`

Embed TriviaTrap.Net using dynamic meta tags