Website Start A Free Trial Request A Feature

Embed Script

Feature embed custom scripts in the employer and candidate panel.

PreviousText & Translations NextApp Center

Last updated 1 month ago

Was this helpful?

Embed Script

Feature embed custom scripts in the employer and candidate panel.

Embed Script

The "Embed Script" section will be used to add custom scripts or CSS that you want to display on the employer and candidate panels.

This allows you to:

Add custom JavaScript (e.g., for chat widgets, tracking, or integrations)
Apply custom CSS styling to change the look and feel of your panel (e.g., colors, fonts, layout tweaks)

The Embed Script feature in Artha Job Board allows you to enhance the functionality of your platform by adding custom JavaScript and third-party integrations. Follow this to make the most of this feature.

1. Overview of the Embed Script Fields

The Embed Script page provides three fields to add custom scripts:

Header Script: Use this field to insert scripts that need to load in the <head> section of your pages, such as metadata-related JavaScript links.
Body Script (Top): Add scripts that need to execute at the top of the <body> section. Typically used for critical third-party tools that must load early, such as Google Tag Manager or analytics tools.
Body Script (Bottom): Add scripts that can load later in the page lifecycle, like non-essential widgets or chatbots.

2. Common Use Cases

A. Adding Third-Party Analytical Tools (e.g., Google Analytics, Facebook Pixel)

Google Analytics:
1. Copy the Google Analytics script provided by your Google Analytics account.
2. Paste the script into the Header Script field for immediate tracking initialization.
Facebook Pixel:
1. Obtain the pixel code from your Facebook Business Manager account.
2. Insert it into the Header Script or Body Script (Top) field, as recommended by Facebook.
Example: Adding Google Analytics

Place the following code in the Header Script field.


<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'GA_TRACKING_ID');
</script>

B. Integrating Google Tag Manager (GTM)

Navigate to your GTM account and copy the provided header and body scripts.
Paste the header code into the Header Script field.
Paste the body code into the Body Script (Top) field.
Save the changes and ensure your GTM setup is working by previewing your website.

C. Embedding Third-Party Chatbots, Live Chat, and Helpdesk Integration

Add live chat solutions to enhance user engagement and provide instant support.
Obtain the embed script for your chatbot.
Place the script into the Body Script (Bottom) field to allow it to load after your page content.
Here are examples of some of the popular live chat software/chatbots that you can add to your website using a simple script: Zendesk Chat (formerly Zopim), LiveChat, Intercom, HubSpot Live Chat, Tawk.to, Crisp Chat, Tidio, Olark, Drift, Smartsupp, and more.
Example: Embedding a Chatbot (Integrating Intercom)
- You’ll need to use a script snippet to embed Intercom on your platform. This snippet adds the Intercom Messenger widget to your site so you can chat with visitors or provide customer support. You should add the script just before closing the Body Script field.
- Intercom recommends loading the widget after the page has loaded for better performance. It relies on the DOM being ready — placing it in the body script field ensures it's triggered at the right time. Here's a standard Intercom embed script:

<script>
  window.intercomSettings = {
    app_id: "YOUR_APP_ID"
  };
</script>
<script>(function() {
  var w = window;
  var ic = w.Intercom;
  if (typeof ic === "function") {
    ic('reattach_activator');
    ic('update', intercomSettings);
  } else {
    var d = document;
    var i = function() {
      i.c(arguments);
    };
    i.q = [];
    i.c = function(args) {
      i.q.push(args);
    };
    w.Intercom = i;
    var l = function() {
      var s = d.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = 'https://widget.intercom.io/widget/YOUR_APP_ID';
      var x = d.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
    };
    if (w.attachEvent) {
      w.attachEvent('onload', l);
    } else {
      w.addEventListener('load', l, false);
    }
  }
})();
</script>

D. A/B Testing Tools

Integrate tools like Google Optimize, Optimizely, or VWO to run A/B or multivariate tests on your job board pages.
Add the script in the Header Script field to enable testing immediately when the page loads.

E. Heatmaps and Session Recordings

Use tools like Hotjar, Crazy Egg, or Microsoft Clarity to analyze user behavior through heatmaps and session recordings.
Paste the tracking script into the Body Script (Top) field.

F. Advertising and Retargeting

Add retargeting scripts for platforms like Google Ads, LinkedIn Ads, or Twitter Ads to reach users who have visited your job board.
Insert the retargeting pixel in the Header Script field.

G. Custom Event Tracking

Implement custom event tracking for specific actions (e.g., job application clicks, form submissions) using a tool like Google Analytics or custom JavaScript.
Add the script in the Body Script (Top) or Body Script (Bottom) fields based on the timing required.

H. SEO Enhancements

Add structured data scripts (e.g., JSON-LD for job postings) to improve how search engines understand your job board content.
Place structured data scripts in the Header Script field.

Example:

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "JobPosting",
  "title": "Software Engineer",
  "description": "We are looking for a Software Engineer to join our team...",
  "datePosted": "2024-12-27",
  "employmentType": "FULL_TIME",
  "hiringOrganization": {
    "@type": "Organization",
    "name": "Your Company"
  },
  "jobLocation": {
    "@type": "Place",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "City",
      "addressRegion": "State",
      "addressCountry": "Country"
    }
  }
}
</script>

I. Accessibility Tools

Integrate third-party accessibility tools like UserWay, EqualWeb, or AccessiBe to ensure compliance with accessibility standards (e.g., WCAG, ADA).
Add the tool's script to the Body Script (Top) or Bottom field.

J. Newsletter Signup Pop-Ups

Add scripts for pop-up forms from email marketing tools like Mailchimp, ConvertKit, or ActiveCampaign to capture email leads.
Insert the pop-up code in the Body Script (Bottom) field.

K. Social Proof Widgets

Use tools like FOMO or Proof to show notifications about recent user actions (e.g., applications submitted) to encourage others to take action.
Add the widget script to the Body Script (Bottom) field.

L. Content Personalization Tools

Implement tools like Dynamic Yield or Qubit to deliver personalized content to users based on their behavior or preferences.
Insert the personalization script in the Body Script (Top) field.

M. Monitoring and Uptime Tools

Add monitoring tools like Pingdom or New Relic to track the uptime and performance of your job board.
Place the monitoring script in the Header Script or Body Script (Bottom) field.

N. Cookie Consent and GDPR Compliance Tools

Integrate cookie consent tools like Cookiebot or OneTrust to manage GDPR and CCPA compliance.
Paste the tool's script in the Header Script field.

Example: Integrating cookie consent with CSS

<script>
const style = document.createElement('style');
style.textContent = `
#cookieConsentPopup {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 480px;
padding: 10px;
font-family: Arial, sans-serif;
z-index: 1000;
}

#cookieConsentPopup h3 {
font-size: 20px;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}

#cookieConsentPopup p {
font-size: 15px;
color: #555;
margin: 12px 0;
line-height: 1.8;
}

#cookieConsentPopup a {
color: #eb2043;
text-decoration: none;
}

#cookieConsentPopup a:hover {
text-decoration: underline;
}

#cookieConsentPopup button {
background-color: #0047AB;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 12px 20px;
font-size: 15px;
cursor: pointer;
margin-top: 15px;
width: 100%;
}

#cookieConsentPopup button:hover {
background-color: #eb2043;
}

.cookie-icon {
width: 30px;
height: 30px;
}

/ Mobile Responsiveness /
@media (max-width: 768px) {
#cookieConsentPopup {
width: 90%; / Adjust width for smaller screens /
right: 5%; / Center it horizontally /
padding: 15px; / Add some padding /
}

#cookieConsentPopup h3 {
font-size: 18px;
}

#cookieConsentPopup p {
font-size: 14px;
}

#cookieConsentPopup button {
font-size: 14px;
padding: 10px 15px;
}

.cookie-icon {
width: 25px;
height: 25px;
}
}
`;
document.head.appendChild(style);

// Check if user has already accepted cookies
if (!localStorage.getItem('cookieConsentAccepted')) {
const popup = document.createElement('div');
popup.id = 'cookieConsentPopup';
popup.innerHTML = `
<h3>
<img src="https://cdn-icons-png.flaticon.com/512/541/541803.png" alt="cookie icon" class="cookie-icon">
Cookie Consent
</h3>
<p>
This website uses cookies or similar technologies, to enhance your browsing experience and provide personalized recommendations. By continuing to use our website, you agree to our <a href="https://cybersechire.com/privacy-policy">Privacy Policy</a>.
</p>
<button id="acceptCookies">Accept</button>
`;
document.body.appendChild(popup);

document.getElementById('acceptCookies').addEventListener('click', () => {
localStorage.setItem('cookieConsentAccepted', 'true');
document.body.removeChild(popup);
});
}
</script>

3. Best Practices

Use Google Tag Manager (GTM):
1. GTM allows you to manage all scripts from one platform, reducing the need for manual updates in the Embed Script fields.
Test Scripts:
1. Before applying a script to your live site, test it in a staging environment to ensure compatibility.
Optimize Performance:
1. Avoid adding unnecessary scripts that might slow down your page load time.
2. Use asynchronous or deferred loading for non-critical scripts whenever possible.
Security:
1. Only add trusted scripts from reliable sources to avoid potential vulnerabilities.

4. How to Use the Feature

Log in to your Artha Job Board admin panel.
Navigate to Manage Portal > Embed Script.
Add the desired scripts into the respective fields:
1. Header Script
2. Body Script (Top)
3. Body Script (Bottom)
Click Save to apply your changes.
Refresh your website and verify the scripts are working as intended.

5. Troubleshooting

Scripts Not Working:
- Check for syntax errors in your code.
- Ensure the script URLs are accessible and not blocked.
Website Performance Issues:
- Use browser developer tools to identify slow-loading scripts.
- Remove or optimize problematic scripts.
Need Help?:
- Contact our support team for assistance with script integration.

By following this, you can maximize the functionality of the Embed Script feature in the Artha Job Board, enhancing your platform with powerful integrations and customizations.

PreviousText & Translations NextApp Center

Last updated 1 month ago

Was this helpful?

Embed Script

The "Embed Script" section will be used to add custom scripts or CSS that you want to display on the employer and candidate panels.

This allows you to:

Add custom JavaScript (e.g., for chat widgets, tracking, or integrations)
Apply custom CSS styling to change the look and feel of your panel (e.g., colors, fonts, layout tweaks)

1. Overview of the Embed Script Fields

The Embed Script page provides three fields to add custom scripts:

Header Script: Use this field to insert scripts that need to load in the <head> section of your pages, such as metadata-related JavaScript links.
Body Script (Top): Add scripts that need to execute at the top of the <body> section. Typically used for critical third-party tools that must load early, such as Google Tag Manager or analytics tools.
Body Script (Bottom): Add scripts that can load later in the page lifecycle, like non-essential widgets or chatbots.

2. Common Use Cases

A. Adding Third-Party Analytical Tools (e.g., Google Analytics, Facebook Pixel)

Google Analytics:
1. Copy the Google Analytics script provided by your Google Analytics account.
2. Paste the script into the Header Script field for immediate tracking initialization.
Facebook Pixel:
1. Obtain the pixel code from your Facebook Business Manager account.
2. Insert it into the Header Script or Body Script (Top) field, as recommended by Facebook.
Example: Adding Google Analytics

Place the following code in the Header Script field.


<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', 'GA_TRACKING_ID');
</script>

B. Integrating Google Tag Manager (GTM)

Navigate to your GTM account and copy the provided header and body scripts.
Paste the header code into the Header Script field.
Paste the body code into the Body Script (Top) field.
Save the changes and ensure your GTM setup is working by previewing your website.

C. Embedding Third-Party Chatbots, Live Chat, and Helpdesk Integration

Add live chat solutions to enhance user engagement and provide instant support.
Obtain the embed script for your chatbot.
Place the script into the Body Script (Bottom) field to allow it to load after your page content.
Here are examples of some of the popular live chat software/chatbots that you can add to your website using a simple script: Zendesk Chat (formerly Zopim), LiveChat, Intercom, HubSpot Live Chat, Tawk.to, Crisp Chat, Tidio, Olark, Drift, Smartsupp, and more.
Example: Embedding a Chatbot (Integrating Intercom)
- You’ll need to use a script snippet to embed Intercom on your platform. This snippet adds the Intercom Messenger widget to your site so you can chat with visitors or provide customer support. You should add the script just before closing the Body Script field.
- Intercom recommends loading the widget after the page has loaded for better performance. It relies on the DOM being ready — placing it in the body script field ensures it's triggered at the right time. Here's a standard Intercom embed script:

<script>
  window.intercomSettings = {
    app_id: "YOUR_APP_ID"
  };
</script>
<script>(function() {
  var w = window;
  var ic = w.Intercom;
  if (typeof ic === "function") {
    ic('reattach_activator');
    ic('update', intercomSettings);
  } else {
    var d = document;
    var i = function() {
      i.c(arguments);
    };
    i.q = [];
    i.c = function(args) {
      i.q.push(args);
    };
    w.Intercom = i;
    var l = function() {
      var s = d.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src = 'https://widget.intercom.io/widget/YOUR_APP_ID';
      var x = d.getElementsByTagName('script')[0];
      x.parentNode.insertBefore(s, x);
    };
    if (w.attachEvent) {
      w.attachEvent('onload', l);
    } else {
      w.addEventListener('load', l, false);
    }
  }
})();
</script>

D. A/B Testing Tools

Integrate tools like Google Optimize, Optimizely, or VWO to run A/B or multivariate tests on your job board pages.
Add the script in the Header Script field to enable testing immediately when the page loads.

E. Heatmaps and Session Recordings

Use tools like Hotjar, Crazy Egg, or Microsoft Clarity to analyze user behavior through heatmaps and session recordings.
Paste the tracking script into the Body Script (Top) field.

F. Advertising and Retargeting

Add retargeting scripts for platforms like Google Ads, LinkedIn Ads, or Twitter Ads to reach users who have visited your job board.
Insert the retargeting pixel in the Header Script field.

G. Custom Event Tracking

Implement custom event tracking for specific actions (e.g., job application clicks, form submissions) using a tool like Google Analytics or custom JavaScript.
Add the script in the Body Script (Top) or Body Script (Bottom) fields based on the timing required.

H. SEO Enhancements

Add structured data scripts (e.g., JSON-LD for job postings) to improve how search engines understand your job board content.
Place structured data scripts in the Header Script field.

Example:

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "JobPosting",
  "title": "Software Engineer",
  "description": "We are looking for a Software Engineer to join our team...",
  "datePosted": "2024-12-27",
  "employmentType": "FULL_TIME",
  "hiringOrganization": {
    "@type": "Organization",
    "name": "Your Company"
  },
  "jobLocation": {
    "@type": "Place",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "City",
      "addressRegion": "State",
      "addressCountry": "Country"
    }
  }
}
</script>

I. Accessibility Tools

Integrate third-party accessibility tools like UserWay, EqualWeb, or AccessiBe to ensure compliance with accessibility standards (e.g., WCAG, ADA).
Add the tool's script to the Body Script (Top) or Bottom field.

J. Newsletter Signup Pop-Ups

Add scripts for pop-up forms from email marketing tools like Mailchimp, ConvertKit, or ActiveCampaign to capture email leads.
Insert the pop-up code in the Body Script (Bottom) field.

K. Social Proof Widgets

Use tools like FOMO or Proof to show notifications about recent user actions (e.g., applications submitted) to encourage others to take action.
Add the widget script to the Body Script (Bottom) field.

L. Content Personalization Tools

Implement tools like Dynamic Yield or Qubit to deliver personalized content to users based on their behavior or preferences.
Insert the personalization script in the Body Script (Top) field.

M. Monitoring and Uptime Tools

Add monitoring tools like Pingdom or New Relic to track the uptime and performance of your job board.
Place the monitoring script in the Header Script or Body Script (Bottom) field.

N. Cookie Consent and GDPR Compliance Tools

Integrate cookie consent tools like Cookiebot or OneTrust to manage GDPR and CCPA compliance.
Paste the tool's script in the Header Script field.

Example: Integrating cookie consent with CSS

<script>
const style = document.createElement('style');
style.textContent = `
#cookieConsentPopup {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
width: 480px;
padding: 10px;
font-family: Arial, sans-serif;
z-index: 1000;
}

#cookieConsentPopup h3 {
font-size: 20px;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}

#cookieConsentPopup p {
font-size: 15px;
color: #555;
margin: 12px 0;
line-height: 1.8;
}

#cookieConsentPopup a {
color: #eb2043;
text-decoration: none;
}

#cookieConsentPopup a:hover {
text-decoration: underline;
}

#cookieConsentPopup button {
background-color: #0047AB;
color: #ffffff;
border: none;
border-radius: 4px;
padding: 12px 20px;
font-size: 15px;
cursor: pointer;
margin-top: 15px;
width: 100%;
}

#cookieConsentPopup button:hover {
background-color: #eb2043;
}

.cookie-icon {
width: 30px;
height: 30px;
}

/ Mobile Responsiveness /
@media (max-width: 768px) {
#cookieConsentPopup {
width: 90%; / Adjust width for smaller screens /
right: 5%; / Center it horizontally /
padding: 15px; / Add some padding /
}

#cookieConsentPopup h3 {
font-size: 18px;
}

#cookieConsentPopup p {
font-size: 14px;
}

#cookieConsentPopup button {
font-size: 14px;
padding: 10px 15px;
}

.cookie-icon {
width: 25px;
height: 25px;
}
}
`;
document.head.appendChild(style);

// Check if user has already accepted cookies
if (!localStorage.getItem('cookieConsentAccepted')) {
const popup = document.createElement('div');
popup.id = 'cookieConsentPopup';
popup.innerHTML = `
<h3>
<img src="https://cdn-icons-png.flaticon.com/512/541/541803.png" alt="cookie icon" class="cookie-icon">
Cookie Consent
</h3>
<p>
This website uses cookies or similar technologies, to enhance your browsing experience and provide personalized recommendations. By continuing to use our website, you agree to our <a href="https://cybersechire.com/privacy-policy">Privacy Policy</a>.
</p>
<button id="acceptCookies">Accept</button>
`;
document.body.appendChild(popup);

document.getElementById('acceptCookies').addEventListener('click', () => {
localStorage.setItem('cookieConsentAccepted', 'true');
document.body.removeChild(popup);
});
}
</script>

3. Best Practices

Use Google Tag Manager (GTM):
1. GTM allows you to manage all scripts from one platform, reducing the need for manual updates in the Embed Script fields.
Test Scripts:
1. Before applying a script to your live site, test it in a staging environment to ensure compatibility.
Optimize Performance:
1. Avoid adding unnecessary scripts that might slow down your page load time.
2. Use asynchronous or deferred loading for non-critical scripts whenever possible.
Security:
1. Only add trusted scripts from reliable sources to avoid potential vulnerabilities.

4. How to Use the Feature

Log in to your Artha Job Board admin panel.
Navigate to Manage Portal > Embed Script.
Add the desired scripts into the respective fields:
1. Header Script
2. Body Script (Top)
3. Body Script (Bottom)
Click Save to apply your changes.
Refresh your website and verify the scripts are working as intended.

5. Troubleshooting

Scripts Not Working:
- Check for syntax errors in your code.
- Ensure the script URLs are accessible and not blocked.
Website Performance Issues:
- Use browser developer tools to identify slow-loading scripts.
- Remove or optimize problematic scripts.
Need Help?:
- Contact our support team for assistance with script integration.

By following this, you can maximize the functionality of the Embed Script feature in the Artha Job Board, enhancing your platform with powerful integrations and customizations.