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:

Automatic scaling and automatic scroll to top on click
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.
Direct links to a job advertisement can be implemented with URL parameter jobId=7b93f411-ed7a-4cb2-84a0-4d00632bc0db
A jump to the applicant mask can be realised with the URL parameter page=apply.
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.

Now you must copy the application portal ID copied above into the place provided for it COPY THE PORTAL ID HERE. The '' must remain.
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. -->

Compatible content management systems (CMS)

Please note that the integration of iFrames is limited or not possible in a few content management systems (CMS).

Not compatible CMS

Wix (as of 28/08/2024)

Possible solutions

If you are using a non-compatible CMS, the following alternative options are available:

Manual entry of the advertisement: Create the advertisement manually and link the ‘Apply’ button directly to the application form. You can find out how to enter the link to the application form here .
Open portal in new window: Link one or more buttons so that the portal opens in a new window. Here you can find out how to open the application portal.
API connection: Use our API (interface) to enable seamless integration of your jobs. You can find more information here.