With Kalder, you can inject your own custom Javascript code in order to customize your portal further. Follow the guide below to see how you can configure your membership details using Javascript.

Where: Admin Portal → Membership Section → Custom Code Tab

Note: Each membership in your admin portal has its own custom code. Select a membership from the sidebar navigator to upload the custom code for that specific membership.

Development Process

• Find “Inspect Element” for your member portal and use fixed data-ids to manipulate the DOM using Javascript

  • A data-id has been assigned to each div

• Inspect Element → Sources → Snippets

  • Write and test your custom code here in your member-portal

  

• When you’re ready with your output - to test it locally in your browser, upload the Javascript code in your membership’s admin portal

  

• Your latest upload will be the one that is live

  

Example Video

https://www.loom.com/share/6c8d3103bcf04149b3416454e84a181f?sid=2b59df2b-7011-4313-b24f-03fd7509d0ff

Example: combine example 1, 2, 3

• Make sure you wrap querySelector results with an IF condition. This script is run on every page, so just because a div/element exists on one page doesn’t mean it will exist on another. Failing to do so will cause the script to fail when IDs are not found on a page.

// ABOUT PAGE
function modifyAboutPage() {
	const about = document.querySelector('#about-section');
  const grid = document.querySelector('div[data-id="div_u31p6f7k69"]')

	// add iframe
	if (about) {
    const youtubeIframeHtml = `<div style="width:100%;display:flex;justify-content:center;margin-top:50px">
        <iframe width="560" height="315" src="<https://www.youtube.com/embed/dQw4w9WgXcQ?si=f4OcHpMWA8GQMoEX>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>
    `
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = youtubeIframeHtml;
    about.prepend(tempDiv.firstChild);
  }
  // modify benifits grid
  if (grid) {
    grid.style.gridTemplateColumns = '1fr';
    const container = document.querySelectorAll('div[data-id="div_uklzpw4xu8"]');

    container.forEach(c => {
      c.style.width = '100%';
      c.style.height = '200px';
    })
  }
}

// ALL PAGES
function addFooterCustomTermsAndConditions() {
    // Find the div with the specified id
    const div = document.querySelector('div[data-id="div_6je3t6qmaf"]')

    if (div) {
        let content = div.innerHTML;
        // Remove the "See " part
        content = content.replace('See ', '');
        // Set the modified content back to the div
        div.innerHTML = content;

        const link = document.createElement('a');
        link.target = "_blank"
        link.href = "<external_link>" // external link
        link.innerHTML = 'Terms & Conditions · ';
        div.prepend(link)
    } else {
      console.log('div not found')
    }
}

addFooterCustomTermsAndConditions();
modifyAboutPage();

Example 1 - Modify About Page, Benefits Grid Layout

function modifyBenefits() {
  const grid = document.querySelector('div[data-id="div_u31p6f7k69"]')

  if (!grid) return;

  grid.style.gridTemplateColumns = '1fr';

  const container = document.querySelectorAll('div[data-id="div_uklzpw4xu8"]');

  container.forEach(c => {
      // Set the width of the container
      c.style.width = '100%';

      // Set the height of the container
      c.style.height = '200px';
  })
}
modifyBenefits()

Example 2 - Add Embedded iframe Video to About Page

function embedIframe() {
    const container = document.querySelector('#about-section');

    if (!container) return;

    const youtubeIframeHtml = `<div style="width:100%;display:flex;justify-content:center;margin-top:50px">
        <iframe width="560" height="315" src="<https://www.youtube.com/embed/dQw4w9WgXcQ?si=f4OcHpMWA8GQMoEX>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>`
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = youtubeIframeHtml;
    container.prepend(tempDiv.firstChild);
}
embedIframe();