Articles in this section
Category / Section

Customizing Your LMS with the Code Inject Feature

Published:
4 mins read

Code inject is a feature that allows users to insert custom code snippets into specific sections of a website, such as a header or footer, for various purposes such as tracking, analytics, or customization.

This article provides instructions on using the Code Inject feature.


Step 1:

Log in to your BrainCert account, navigate to 'Global Settings' in the dashboard, and then open 'Basic Settings'.
1.png


Step 2:

Go to the 'Code Inject' feature in the 'Basic Settings' menu.


Step 3:

Enter the code snippet you want to inject into the 'Site Header'.

This section allows you to inject code that will be inserted into the <head> tag on every page of your site.


Next, navigate to the 'Site Footer' section.

This section enables you to inject code that will be inserted into the <footer> tag on every page of your site.
Snip20240503_6.png
We recommend placing CSS in the header section, ensuring that the code is enclosed within <style></style> tags.



Using the Site Header

The 'Site Header' section enables users to inject code that will be inserted into the <head> tag on every site page.

This is particularly useful for incorporating tracking codes, meta tags, and other scripts that need to be loaded before the page content. Administrators can seamlessly integrate third-party analytics tools, such as Google Analytics, or add custom CSS styles to enhance the site's design.


Using the Site Footer

The 'Site Footer' section allows users to inject code that will be inserted into the <footer> tag on every site page. This benefits scripts or functionalities that require access to the page's HTML structure or content. Users can include JavaScript libraries, social media widgets, or custom scripts to optimize performance and functionality across all pages.



After saving the changes, you'll notice the effects of your CSS modifications throughout your LMS. You can also use the "view source" option in your browser to verify the JavaScript code updates.

6.png

Personalization with Variables

One notable feature of the 'Code Inject' feature is the ability to use variables such as {{user.fullname}} and {{user.email}} within custom scripts. This functionality allows administrators to dynamically insert the logged-in user's name and email address into their custom scripts, providing a personalized experience for users.

Example:

When incorporating custom scripts into your platform, it's vital to leverage dynamic variables for enhanced user interaction and data analysis. This example demonstrates how you can use the 'Code Inject' feature to collect and utilize user-specific data—namely, the user's full name and email address. This data is then prepared to be sent to an analytics service, providing valuable insights into user behavior and engagement.

This example below is ideal for anyone looking to implement advanced features into their BrainCert platform while ensuring a high degree of user engagement and personalized experience. It's also a starting point for those looking to integrate more complex analytics and data handling features seamlessly.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Simulated function to send data to an analytics server
    function sendAnalyticsData(userData) {
      console.log("Sending analytics data: ", userData);
      // Placeholder for sending data to an analytics endpoint
      // fetch('https://example-analytics.com/data', {
      // method: 'POST',
      // headers: {
      // 'Content-Type': 'application/json'
      // },
      // body: JSON.stringify(userData)
      // }).then(response => response.json())
      // .then(data => console.log('Success:', data))
      // .catch((error) => console.error('Error:', error));
    }

    // Collect user data using template variables
    var userData = {
      name: '{{user.fullname}}',
      email: '{{user.email}}'
    };

    // Call the function to send user data to analytics
    sendAnalyticsData(userData);
  });
</script>

By strategically injecting code into the site header and footer, users can enhance functionality, track user activity, and personalize the learning experience for their users. Whether it's integrating tracking codes, adding custom scripts, or personalizing content, this feature offers flexibility and versatility to meet the unique needs of every user.


Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Access denied
Access denied