If you're on a Pro or Premium plan and have a custom domain setup, you have access to Eduflow's custom code feature. With this feature you can add your own code to your institution that will get executed for everyone within your institution. That means you can do things like:

  • Customize the look and feel even further than what Eduflow's built-in white-labelling features can offer

  • Add tracking and analytics links

  • Add your own in-app support widget

  • Change the layout of your institution to seamlessly embed it into your own website or app

Currently the feature is only accessible by getting in contact with Eduflow's support staff. We expect to expose this as a user-facing feature soon though.

Below you'll find a few examples of how you can leverage custom code.

Embedding Eduflow into a website or app

Eduflow can be embedded into a website or web app using an <iframe>. Simply select the URL from your Eduflow institution and insert it into the src attribute like this (replace the URL with your own):

<iframe src="https//app.eduflow.com/"></iframe>

Remove Eduflow's header when embedded in app

Eduflow embedded into another app

If you wish to maintain your own navigation in a header section (imagine your own header replacing the yellow header in the screenshot above), you can remove Eduflow's header by adding a custom script to your institution. This requires:

  • That you have a custom domain setup

  • A developer with access to your codebase

To do this, you need to get in contact through Eduflow's in-app support chat and ask to get the following code snippet added as custom code:

<script>
if (window.location !== window.parent.location) {
// The page is in an iframe
document.addEventListener("DOMContentLoaded", function () {
var body = document.body;
document.body.classList.add("insideIframe");
});
}
</script>
<style>
body.insideIframe .AppHeader__header___ZAzad {
display: none !important;
}

body.insideIframe .AppHeader__headerSpacer___K5ZRE {
display: none !important;
}

body.insideIframe .Sidebar__sidebar___OHnHS {
top: 0 !important;
}

body.insideIframe .LayoutView__CollapseButtonHitArea___gKtmz {
display: none !important;
}

body.insideIframe .UserOverview__container___Zv23Z,
body.insideIframe .LayoutView__view___Uyc6C {
min-height: 100vh !important;
}

body.insideIframe .ActivityContainer__activityContainer___xT11s .ActivityContainer__activityContainerInner___ekxxu, .ActivityContainer__activityContainer___xT11s .ActivityContainer__videoActivityContainerInner___qk07j {
min-height: calc(100vh - 5rem) !important;
}
</style>

Here's an example HTML file that shows the basic structure for how to embed your institution in an iframe with your own header:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}

header {
height: 4rem;
background-color: papayawhip;
display: flex;
align-items: center;
justify-content: center;
}

iframe {
border: none;
width: 100%;
height: calc(100vh - 4rem);
}
</style>
</head>
<body>
<header>This is your header</header>
<iframe src="https://spendbound.eduflow.com"></iframe>
</body>
</html>

There's a few important limitations of this approach to be aware of:

  • If you remove Eduflow's header, learners will no longer have the option to access their notifications, messages, user settings and anything else that lives in Eduflow's header section.

  • Users will still need to authenticate with their Eduflow credentials when they see the embedded view. In practice, this means that users will first need to log into your own website and app, then log into Eduflow through the embed. Users can still use the same credentials with an SSO setup.

Custom styling

Eduflow exposes the full color palette as CSS variables that can be overwritten by custom code. If you inspect the DOM and select the HTML element you'll see a long list of variables that you can tweak to your preference. You can tinker with changing the DOM on your own, save your preferred overrides to an HTML file inside a

<style> tag and share it with us on support. Then we'll add it to your institution for you.

Screenshot of Eduflow with Chrome's DevTools inspector open showing the CSS variables we expose

Adding your own tracking link

If you're using any analytics tracking software and want to track interactions in your institution with it, you can add your own tracking link. Just share the link with Eduflow's support staff and they will set it up for your institution.

Adding your own in-app chat widget

If you would want your users to get in touch with you through your own in-app chat widget you can embed it into your institution. Remember to toggle off Eduflow's own chat support in your institution settings to not create any conflicts.

Did this answer your question?