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

You can add custom code to your institution by going to your institution admin panel → Settings → Customization and scroll to the bottom.

Variables and logic

We provide variables and basic logic via the Liquid template language that you can use when adding custom code. Read more on how to use variables and logic here.

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

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 can add the following code to your custom code section within your institution:

<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.

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 by pasting it into your custom code section.

Adding your own in-app chat widget