Home Companies Jobs Maps Candidate Employer

Widget Embed Guide

Learn how to add JobGara widgets to your website

Getting Started with Widget Embedding

Once you've created your JobGara widget, embedding it on your website is straightforward. This guide will walk you through the process for different platforms and provide troubleshooting tips.

📋 Before You Start: Make sure you have your widget embed code ready. If you don't have it, create a widget first.

Your Widget Embed Code

Every JobGara widget comes with a unique embed code that looks like this:

<div id="jobgara-widget-widget_68ffa609eddf6_1761584649"></div>
<script src="https://jobgara.com/widget.js?key=widget_68ffa609eddf6_1761584649"></script>
✅ Example Code: The code above is a real example using widget key widget_68ffa609eddf6_1761584649. Replace this with your actual widget key when embedding.

Understanding the Embed Code

HTML Container

<div id="jobgara-widget-[WIDGET_KEY]"></div>

This creates a container where your widget will be displayed. The ID is unique to your widget.

JavaScript Loader

<script src="https://jobgara.com/widget.js?key=[WIDGET_KEY]"></script>

This loads the widget script and renders your widget in the container above.

How to Embed Your Widget

1Copy Your Embed Code

From your widget management panel:

  • Go to your Widgets section in the employer dashboard
  • Find your widget and click "Get Embed Code"
  • Copy the complete embed code to your clipboard

Image Placeholder: Widget management panel showing "Get Embed Code" button

Recommended size: 800x300px

2Choose Your Embedding Location

Decide where on your website you want the widget to appear:

  • Career/Jobs Page: Most common placement
  • Homepage: For featured job listings
  • About Us Page: To show company culture
  • Sidebar: For compact widget displays
  • Footer: For subtle job promotion

3Add the Code to Your Website

The method depends on your website platform. See platform-specific instructions below.

Platform-Specific Instructions

WordPress

Method 1: Block Editor (Gutenberg)
  1. Edit the page where you want the widget
  2. Add a new "Custom HTML" block
  3. Paste your embed code into the block
  4. Update/Publish the page
Method 2: Classic Editor
  1. Switch to "Text" mode (not Visual)
  2. Paste your embed code where you want the widget
  3. Update/Publish the page

Image Placeholder: WordPress Custom HTML block with embed code

Recommended size: 700x400px

HTML/Static Website

  1. Open your HTML file in a text editor
  2. Find the location where you want the widget (e.g., inside a <div> or <section>)
  3. Paste the embed code
  4. Save and upload the file to your web server
<!-- Example placement in HTML -->
<section class="jobs-section">
    <h2>Current Job Openings</h2>
    
    <!-- JobGara Widget -->
    <div id="jobgara-widget-widget_68ffa609eddf6_1761584649"></div>
    <script src="https://jobgara.com/widget.js?key=widget_68ffa609eddf6_1761584649"></script>
    <!-- End JobGara Widget -->
    
</section>

Shopify

  1. Go to Online Store → Themes
  2. Click "Actions → Edit code"
  3. Find the template file you want to edit (e.g., page.liquid)
  4. Add the embed code where you want the widget
  5. Save the file

Squarespace

  1. Edit the page where you want the widget
  2. Add a "Code" block
  3. Paste your embed code
  4. Save and publish

Wix

  1. Go to your site editor
  2. Click "Add → More → HTML iframe"
  3. Click "Enter Code"
  4. Paste your embed code
  5. Apply and publish

Testing Your Widget

✓Verify Your Installation

After embedding your widget, check that it's working correctly:

  • Visual Check: Visit your website and confirm the widget appears
  • Functionality Test: Try clicking on job listings and buttons
  • Mobile Test: Check how the widget looks on mobile devices
  • Loading Speed: Ensure the widget loads quickly
✅ Success Indicators:
  • Widget displays job listings from your company
  • Styling matches your website design
  • Links work and redirect properly
  • Widget is responsive on all devices

Troubleshooting Common Issues

Widget Not Appearing

  • Check that both HTML div and script tags are included
  • Verify the widget key is correct
  • Ensure there are no JavaScript errors in browser console
  • Check if your website blocks external scripts

Styling Issues

  • Widget colors don't match: Update widget design settings
  • Widget too wide/narrow: Adjust container CSS
  • Font conflicts: Check widget font settings
  • Mobile display issues: Test responsive settings
🔧 Still Having Issues? Contact our support team at support@jobgara.com with your widget key and website URL for personalized assistance.

Advanced Embedding Options

Custom Container Styling

You can add custom CSS to style the widget container:

<style>
#jobgara-widget-widget_68ffa609eddf6_1761584649 {
    max-width: 800px;
    margin: 20px auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
</style>

<div id="jobgara-widget-widget_68ffa609eddf6_1761584649"></div>
<script src="https://jobgara.com/widget.js?key=widget_68ffa609eddf6_1761584649"></script>

Multiple Widgets

You can embed multiple widgets on the same page:

<!-- Widget 1: Featured Jobs -->
<div id="jobgara-widget-widget_68ffa609eddf6_1761584649"></div>
<script src="https://jobgara.com/widget.js?key=widget_68ffa609eddf6_1761584649"></script>

<!-- Widget 2: All Jobs -->
<div id="jobgara-widget-widget_another_key_123456789"></div>
<script src="https://jobgara.com/widget.js?key=widget_another_key_123456789"></script>

What's Next?

Customize Your Widget

Learn advanced customization options

Customization Guide
Manage Your Widgets

Edit, update, and manage existing widgets

Management Guide
See Examples

View live examples of different widget types

Examples
Back to Creation Guide Next: Customization