How to add custom script to your course website ?

In Course.link, you can add your own custom JavaScript or third-party code snippets to your course website. You can also use custom CSS to style elements the way you want. This lets you add extra features like tracking, widgets, or design changes without needing to edit your site’s code directly.

Add Custom Script

Go to your Course.link dashboard and click on Settings > Integrations where you will see the option to add a custom script. Click on Connect to add your code.

In the popup modal, you’ll see two sections:

• JavaScript: You can add your custom JS code here. Just wrap it inside <script> tags.

• CSS: Add custom styles by targeting HTML elements using their #id.

After adding your custom JavaScript or CSS code, click the Save button.

Note

In this example, we’re adding an announcement bar to the top of the site. Below are the exact code snippets used:

Javascript

<script>
document.addEventListener("DOMContentLoaded", function () {
  const bar = document.createElement("div");
  bar.id = "cl-announcement-bar";
  bar.innerHTML = `🎉 Welcome to Yoga Mastery! <a href="#courses">Browse our courses</a>`;
  document.body.prepend(bar);
});
</script>

CSS

#cl-announcement-bar {
  position: fixed;
  top: 0;
  width: 100%;
  background: #4F46E5;
  color: #fff;
  text-align: center;
  padding: 10px;
  font: 500 16px sans-serif;
  z-index: 9999;
}

#cl-announcement-bar a {
  color: #FFD700;
  text-decoration: underline;
  margin-left: 6px;
}

body {
  padding-top: 44px;
}

You can fully customize the design and message to match your course website.

Preview the Custom Code

Go to your course website and refresh the page to see your custom script live in action.