Documentation

Career widget

Career widget is customizable JavaScript which you can place into your company website.

Career widget displays all available information about vacancies posted from Teamio such as a list of open vacancies, job description and reply form.

How to implement it

We are providing a piece of JavaScript code snippet which needs to be placed into your website wherever your career section should be displayed.

Once you have configured the widget send us a request for the API key and widget ID which needs to be put into snippet configuration.

Snippet renders HTML structure with simple theme and other styling of it is up to you.

Usage

Paste this code into your web page.

<div id="capybara"></div>
<script type="application/javascript">
  var __LMC_CAREER_WIDGET__ = {
    apiKey: 'example_api_key',
    widgetId: '12345000-0000-1000-a000-000000000000',
    selector: '#capybara'
  };
</script>

And this script (widget) you can put anywhere into head or body of html document (for example at the end of body or into your footer):

<script src="https://snippet.capybara.lmc.cz/js/widget-3.x.x.min.js" async defer></script>

Take a look at the example.

What to do after installation

  1. By default widget scrolls to the container with embeded snippet. If you have navigation bar with fixed position on your site a part of content could be hidden. You can configure default scrolling. Take a look at Options.
  2. Buttons and text inputs in vacancy detail and reply form have default styles. We recommend to check how it looks on your website. It will be easier for users to fill in the form and send reply.
  3. The part of a reply form is a checkbox for give user consent to a company for processes personal data. We recommend to check if checkbox is part of this consent. Otherwise users won’t be able to give consent to an employer.
    alt text

Script urls

Examples:

We recommend to use widget-<major-version>.x.x.min.js which is already up to date with latest major release.

We also recommend to load script directly from our servers to stay up to date with latest features and bug fixes.

Releases

Changelog

See latest changes in our public changelog file.

Configuration

You can pass configuration options to the widget by definition variable __LMC_CAREER_WIDGET__:

var __LMC_CAREER_WIDGET__ = {
  ...options
}

Widget will be rendered automatically after script is ready.

Options

Routing

For routing between widget views/screens/pages we are using query strings. Widget adds its query string parameters to an existing url and its parameters. It does not modify or replace existing url format or parameters

Please, make sure that your web server does not remove query string parameters from url. If so, please modify your webserver configuration or contact us for further assistance.

Examples

Events

You can add event listener to root container element and listen to widget custom events.

All events are bubbling { bubbles: true }.

Custom Events

Rendered

Events are dispatched after component is rendered.

Transition

Events are dispatched on transitions between pages.

Example:

<script>
    function eventHandler(event) {
      console.log('The detail is: ' + JSON.stringify(event.detail));
    }
    var container = document && document.getElementById('capybara');
    container.addEventListener('LMC_career_widget_listingRendered', eventHandler);
</script>

Support

If there is something that does not work or if you need to get API Key or WidgetId, please, contact us.

Contacts

help.me@teamio.com