Skip to main content
All CollectionsCanditates portalIntegrate applicant portal on website
How can I integrate the applicant portal on my website or intranet?
How can I integrate the applicant portal on my website or intranet?

Learn how to integrate the applicant portal directly into your website.

Raphael Mösch avatar
Written by Raphael Mösch
Updated over a week ago

If you need help with the implementation, please do not hesitate to contact us. The easiest way is via chat at the bottom right of the Dualoo.

Requirements

  • You need access to the website.

  • We recommend that you forward these instructions to your IT department or to those responsible for maintaining your website.

  • You can see how URL parameters work in principle and which parameters can also be used without iFrame integration here.

Features of the iFrame integration

This integration type makes it possible to integrate all vacancies from an application portal directly into your site. The following features are supported as standard:

  1. Automatic scaling and automatic scroll to top on click

  2. The language of the application portal displayed can be defined.

    1. By default, this is set via a URL parameter lang=DE

    2. The script below can be customised as long as the variable lang is assigned with a valid language code (DE, EN, FR). For example, you can parse the language directly from the URL and add it to the iFrame. This means that your application portal is always displayed in the language of the website.

  3. Direct links to a job advertisement can be implemented with URL parameter jobId=7b93f411-ed7a-4cb2-84a0-4d00632bc0db

  4. A jump to the applicant mask can be realised with the URL parameter page=apply.

  5. If you want to deactivate the back button, for example "back to advertisement" in the input mask, you can set the URL parameter backButton=hide

The following example shows a call of a German job advertisement directly to the applicant mask / input mask without a back button:

https://www.example.ch/bewerberportal?jobId=762ff933-61a9-4d77-896b-829aea38c7b9&page=apply&lang=DE&backButton=hide


URL parameter

URL parameter

possible values

Where can I get these values

lang

DE, EN, FR

Depending on the language in which the applicant portal is to be displayed.

jobId

UUID des Jobs

Copy the job ID from the URL:

Please note that the job must be published in the relevant application portal

page

apply, detail

Only possible if jobId is also set.

apply: The application screen for the JobID is displayed directly.

detail: The job advertisement for the JobID is displayed directly.

backButton

hide, show

Only possible if jobId and page are also set.

hide: The button to go to the job advertisement is deactivated.

show: Standard behaviour with button for job advertisement.

Customised adaptations

Our iFrame integration is flexible and can be integrated into your website in various ways. We have listed a variant below that works with most CMS.

With multiple iFrames, it is important that the iFrame ID (in the example below: dualoo-iframe-1) is unique in each case and that it matches between your website and the script.

We will be happy to help you with your individual requirements (for a fee).

Where to find & how to copy Job Portal ID

1. click on ‘Settings’ at the top and then on ‘Online application portals’

2. Select the desired portal.

3. Copy the last part of the URL - this is the Job Portal ID.
In this example: unkan2zj

Integrate an applicant portal with iFrame and variable height

You can find an example on our website: here

If you have problems, please contact our support. We will gladly help you.

  1. Now you must copy the application portal ID copied above into the place provided for it COPY THE PORTAL ID HERE. The '' must remain.

  2. You must also enter the default language at ENTER THE LANGUAGE HERE. Please make sure that it is one of the following language codes: DE, EN or FR

<script id="dualoo-iframe-1">
(function() {
const portalId = 'COPY THE PORTAL ID HERE';
const script = document.createElement("script");
script.src = 'https://jobs.dualoo.com/content/iframe/iframe_loader_v3.js';
script.onload = function() {
const urlParams = new URLSearchParams(window.location.search),
jobId = urlParams.get("jobId"),
page = urlParams.get("page"),
backButton = urlParams.get('backButton'),
lang = (urlParams.get("lang") || 'ENTER THE LANGUAGE HERE').toUpperCase(),
params = backButton === 'hide' && page === 'apply' ? {
backButton: 'hide',
lang: lang
} : {
lang: lang
},
query = Object.keys(params).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`).join('&'),
portalUrl = jobId ? `https://jobs.dualoo.com/portal/${portalId}/${jobId}/${page === 'apply' ? 'apply' : 'detail'}?${query}` : `https://jobs.dualoo.com/portal/${portalId}?${query}`;

dualooIframe.addIframe({
elementId: 'dualoo-iframe-1',
portalUrl: portalUrl
});
};
document.head.appendChild(script);
})();
</script>

Then copy the entire code (from <script to </script>) and paste it into the vacancies on your website. Your IT department or the person responsible for the website can normally do this for you.

The application portal is now fully integrated.

Integrate several applicant portals with iFrame and variable height

The procedure is basically the same as for an applicant portal. You simply have to use a different code.
A maximum of 4 iFrames can be integrated on the exact same page of the website so that your career portal also remains clearly arranged.

<script id="dualoo-iframe-1">
(function() {
const portalId = 'COPY THE PORTAL ID 1 HERE';
const script = document.createElement("script");
script.src = 'https://jobs.dualoo.com/content/iframe/iframe_loader_v3.js';
script.onload = function() {
const urlParams = new URLSearchParams(window.location.search),
jobId = urlParams.get("jobId"),
page = urlParams.get("page"),
backButton = urlParams.get('backButton'),
lang = (urlParams.get("lang") || 'ENTER THE LANGUAGE HERE').toUpperCase(),
params = backButton === 'hide' && page === 'apply' ? {
backButton: 'hide',
lang: lang
} : {
lang: lang
},
query = Object.keys(params).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`).join('&'),
portalUrl = jobId ? `https://jobs.dualoo.com/portal/${portalId}/${jobId}/${page === 'apply' ? 'apply' : 'detail'}?${query}` : `https://jobs.dualoo.com/portal/${portalId}?${query}`;

dualooIframe.addIframe({
elementId: 'dualoo-iframe-1',
portalUrl: portalUrl
});
};
document.head.appendChild(script);
})();
</script>

<script id="dualoo-iframe-2">
(function() {
const portalId = 'COPY THE PORTAL ID 2 HERE';
const script = document.createElement("script");
script.src = 'https://jobs.dualoo.com/content/iframe/iframe_loader_v3.js';
script.onload = function() {
const urlParams = new URLSearchParams(window.location.search),
jobId = urlParams.get("jobId"),
page = urlParams.get("page"),
backButton = urlParams.get('backButton'),
lang = (urlParams.get("lang") || 'ENTER THE LANGUAGE HERE').toUpperCase(),
params = backButton === 'hide' && page === 'apply' ? {
backButton: 'hide',
lang: lang
} : {
lang: lang
},
query = Object.keys(params).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`).join('&'),
portalUrl = jobId ? `https://jobs.dualoo.com/portal/${portalId}/${jobId}/${page === 'apply' ? 'apply' : 'detail'}?${query}` : `https://jobs.dualoo.com/portal/${portalId}?${query}`;

dualooIframe.addIframe({
elementId: 'dualoo-iframe-2',
portalUrl: portalUrl
});
};
document.head.appendChild(script);
})();
</script>

<!-- Bis hierhin kopieren, falls Sie zwei Bewerberportal einbinden wollen. -->

<script id="dualoo-iframe-3">
(function() {
const portalId = 'COPY THE PORTAL ID 3 HERE';
const script = document.createElement("script");
script.src = 'https://jobs.dualoo.com/content/iframe/iframe_loader_v3.js';
script.onload = function() {
const urlParams = new URLSearchParams(window.location.search),
jobId = urlParams.get("jobId"),
page = urlParams.get("page"),
backButton = urlParams.get('backButton'),
lang = (urlParams.get("lang") || 'ENTER THE LANGUAGE HERE').toUpperCase(),
params = backButton === 'hide' && page === 'apply' ? {
backButton: 'hide',
lang: lang
} : {
lang: lang
},
query = Object.keys(params).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`).join('&'),
portalUrl = jobId ? `https://jobs.dualoo.com/portal/${portalId}/${jobId}/${page === 'apply' ? 'apply' : 'detail'}?${query}` : `https://jobs.dualoo.com/portal/${portalId}?${query}`;

dualooIframe.addIframe({
elementId: 'dualoo-iframe-3',
portalUrl: portalUrl
});
};
document.head.appendChild(script);
})();
</script>

<!-- Bis hierhin kopieren, falls Sie drei Bewerberportal einbinden wollen. -->

<script id="dualoo-iframe-4">
(function() {
const portalId = 'COPY THE PORTAL ID 4 HERE';
const script = document.createElement("script");
script.src = 'https://jobs.dualoo.com/content/iframe/iframe_loader_v3.js';
script.onload = function() {
const urlParams = new URLSearchParams(window.location.search),
jobId = urlParams.get("jobId"),
page = urlParams.get("page"),
backButton = urlParams.get('backButton'),
lang = (urlParams.get("lang") || 'ENTER THE LANGUAGE HERE').toUpperCase(),
params = backButton === 'hide' && page === 'apply' ? {
backButton: 'hide',
lang: lang
} : {
lang: lang
},
query = Object.keys(params).map(k => `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`).join('&'),
portalUrl = jobId ? `https://jobs.dualoo.com/portal/${portalId}/${jobId}/${page === 'apply' ? 'apply' : 'detail'}?${query}` : `https://jobs.dualoo.com/portal/${portalId}?${query}`;

dualooIframe.addIframe({
elementId: 'dualoo-iframe-4',
portalUrl: portalUrl
});
};
document.head.appendChild(script);
})();
</script>

<!-- Copy up to this point if you want to integrate four application portals. -->
Did this answer your question?