Embed/embedding a Hireflix interview in Wix (similar on any other platform Webflow etc...)?
How to embed/embedding a Hireflix interview in Wix.
To embed a Hireflix interview in a Wix website is super easy. Keep in mind that for it to work properly you need a Wix paid plan and a site with its own domain. To learn how to embed Hireflix in Wix, check the video below:
<iframe src="YOUR LINK HERE"
allow="camera *; microphone *; autoplay *; encrypted-media *; fullscreen *; display-capture *;"
width="100%"
height="100%"
style="border: none; border-radius: 20px"
>
</iframe>
IMPORTANT: This is the code I mention on the video. Just copy it and paste it where I mention on the video above đđ:
<script>
function addPermissions (iframe) {
const ALLOW_PERMISSIONS = 'camera *; microphone *; autoplay *; encrypted-media *; fullscreen *; display-capture *;'
if (iframe.allow === ALLOW_PERMISSIONS) {
return
}
iframe.setAttribute('allow', ALLOW_PERMISSIONS)
iframe.allow = ALLOW_PERMISSIONS
iframe.src = iframe.src
}
document.querySelectorAll('iframe').forEach(addPermissions)
const observer = new MutationObserver(function (mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.addedNodes && mutation.addedNodes.length) {
for (let node of mutation.addedNodes) {
if (node.querySelectorAll) {
node.querySelectorAll('iframe').forEach(addPermissions)
}
}
}
}
})
observer.observe(document.body, { attributes: false, childList: true, subtree: true })
</script>
How to avoid a 404 error when using custom domains.
If you are trying to implement embedding, and you are using custom domains, and you are getting a 404 error, the reson is the below.
For security reasons, when an interview uses a custom domain like interview.yourdomain.com it can only be loaded inside an iframe from:
- Subdomains of yourdomain.com (e.g., something.yourdomain.com)
- app.hireflix.com
You are probably getting the error because you are trying to load it for example from a webflow link, but since the main domain webflow.com doesnât match yourdomain.com, itâs being blocked.
This security measure is in place to prevent malicious sites from embedding the interview without permission and potentially tracking clicks or keystrokes. For example, without this restriction, a site like evil{.}com could embed the interview page and carry out these kinds of attacks. The solution, if the issue is on webflow, would be to use a custom domain something.yourdomain.com on webflow: https://help.webflow.com/hc/en-us/articles/33961334343827-Connect-a-custom-domain-overview
