Advanced Usage
Configuration
Embeds can be configured using attributes on the <script> element. The following attributes are supported:
| Attribute | Default | Type |
|---|---|---|
data-embed-id | string | |
data-locale | de | string Either en or de |
data-locale will not change the language of the embed if the user has a different language preference set in their browser. It will only be used as a fallback if no preference is set or a preference is set that is not supported by the embed.Multiple postings
By default, any embed will only be able to display a single praktikum.io posting. However, you may want to display a few of your postings at the same time, for example in your career pages.
To do this, you will first have to configure your embed to allow multiple postings. Head over to the praktikum.io App, navigate to your embed settings, select any postings you want to display in the embed and save your changes.
Then you will be able to use the data-praktikumio-postings attribute on your container element to provide a comma-separated list of posting IDs instead of the default * that shows a single posting.
<div data-praktikumio-postings="posting1,posting2,posting3"></div>
The embed will display all postings in the order you specified on the element. If the embed is configured for more postings than you specified, only the postings you specified will be displayed. You can get the posting ID from the URL when viewing a posting in the praktikum.io App.
You may define a container element multiple times, which will embed the postings in all of them.
data-praktikumio-postings="*" on your page as well. This way, if you add new postings in the future, they will automatically be displayed without needing to update your website.Single Page Applications
For most users with a traditional website, the embed will work out of the box. However, if you are using a modern Single Page Application (SPA) or Server-Side Rendered (SSR) website, you may need to take a few additional steps to ensure the embed works correctly. If your website uses client-side routing (e.g. with frameworks like React, Vue, or Angular), the embed may not automatically update when navigating between pages.
To handle this, stafftastic publishes an npm package @stafftastic/posting-embeds that provides a simple API to include our embeds in SPAs.
Installation
You can install the package using npm (or a compatible package manager):
npm install @stafftastic/posting-embeds
Usage
Configure the embed module
Import and initialize the embed module in your application. You typically only need an embed ID to do this.
import { configure } from '@stafftastic/posting-embeds';
configure({
embedId: 'your-embed-id-here',
});
You can pass additional configuration options as well, such as locale.
Scan for embeds
Whenever you navigate to a new page in your SPA, you need to call the scan method to ensure that any new embed containers are initialized.
import { scan } from '@stafftastic/posting-embeds';
scan();
If you have a particular edge case you may also manually create embeds in a specific container.
import { createOutlet } from '@stafftastic/posting-embeds';
createOutlet({
// You may also use a selector string here
container: document.getElementById('my-embed-container'),
postings: '*', // or a an array of posting IDs
});