Introduction
Widgets allow you to add content to specific parts of your page, it can be regular content, or dynamic content based upon data from OTYS Go! like vacancies, open application forms, etc. Widget exist within sections and columns. More information on this can be found in our ‘Creating Content’ article.
Site → Pages → Sections → Column(s) → Widget(s)
You can see the full widgets list below, and each of the widgets have their own subsection within this article. Please note: not every widget might show up when you’re trying to configure a column. This will be due to the width of the column. Some widgets need space to exist, and if you’ve selected a layout that creates narrow columns they simply won’t work. To fix this, select a different layout for your columns, such as [6/6], or [12]. If the widget you want to use still does not show up, please contact our support desk by opening a ticket.
Vacancies List
The vacancies list widget enables you to create an overview page of your vacancies. You can show all vacancies by default, or even pre-filter the list so you can create landing-pages.
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Option | Tab | Description |
|---|---|---|
Title | Content | The title above the list of vacancies. It supports a merge field called: “{total}“ which shows the total number of vacancies |
Labels to show | Content | Which labels you want to show below the title of the job in the list. You can sort the labels by dragging them. |
Vacancies per page | Configuration | The amount of vacancies shown per page |
Show main image | Configuration | Whether to show the main image (often employer logo) of the vacancy |
Show short description | Configuration | Whether to show the “Short description” textfield below the title |
Show location | Configuration | Whether to show the jobs location on top of the title |
Pre filter on * | Configuration | This pre-filters the list on criteria or category. |
.png?sv=2022-11-02&spr=https&st=2025-10-29T06%3A38%3A43Z&se=2025-10-29T07%3A00%3A43Z&sr=c&sp=r&sig=ZrwnI9ABxTurrXvuUFkKPEymT7y3Qu2XVCc7st7Ba1w%3D)
Vacancies Shortlist
The vacancies shortlist widget can be used anywhere to highlight certain jobs.
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Option | Tab | Description |
|---|---|---|
Title | Content | The title above the list of vacancies. It supports a mergefield called: “{total}“ which shows the total number of vacancies |
Labels to show | Content | Which labels you want to show below the title aof the job in the list. You can sort the labels by dragging them. |
Max vacancies to show | Configuration | The amount of vacancies shown in the shortlist |
Show main image | Configuration | Whether to show the main image (often employer logo) of the vacancy |
Show short description | Configuration | Whether to show the “Short description” text field below the title |
Show location | Configuration | Whether to show the jobs location on top of the title |
Pre filter on * | Configuration | This pre-filters the list on criteria or category. |
.png?sv=2022-11-02&spr=https&st=2025-10-29T06%3A38%3A43Z&se=2025-10-29T07%3A00%3A43Z&sr=c&sp=r&sig=ZrwnI9ABxTurrXvuUFkKPEymT7y3Qu2XVCc7st7Ba1w%3D)
Vacancies filters
Meant to be used in combination (in the same section) with a vacancies list widget. This way you can use the Filters to filter on the list.
The vacancies filters widget shows a list of enabled criteria and categories.
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Option | Tab | Description |
|---|---|---|
Title | Content | The title above the list of filters. If you want you can make it empty. |
Filters | Content | You can enable filters and sort them by dragging. |
Max options | Configuration | Sometimes a filter may contain lots of options, by setting a max there will be a “Show more” action when the filter exceeds your limit. |
Vacancies keyword search
Meant to be used in combination (in the same section) with a vacancies list widget. This way you can use the Keyword search to filter on the list.
Option | Tab | Description |
|---|---|---|
Title | Content | The title above the keywords input |
Vacancies Geosearch
Note: This widget only works when you have provided OTYS with a Google Geocoding API key. You can contact our support team for this.
Note: When this filter is used, only jobs with filled in addresses will show up in the results.
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Meant to be used in combination (in the same section) with a vacancies list widget. This way you can use the Geo search to filter on the list.
Option | Tab | Description |
|---|---|---|
Title | Content | The title above the Geo search inputs |
Country | Content | The search is based upon Zip Code, and zip codes differ per country. Make sure to select the country you would like to be able to search. Supported countries are: NL, BE, LUX, FR, DE, UK, AU, AT |
Max radius | Configuration | The maximum radius a user can select using the range slider. (Default 125km) |
Open application form
It is possible to add an open application form to your page, the actual form is based upon your Questionset configuration in OTYS Go!
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Option | Tab | Description |
|---|---|---|
Title | Content | The title above the form |
Thank you message | Content | When the application is successful a thank you message will appear. You can (re)write it here. |
Tracking script | Configuration | When the application is successful we can perform custom scripts for you. Paste them here. |
Text
A text widget allows you to put content anywhere. Want to know more on how to work with the WYSIWYG Editor? Read more
Option | Tab | Description |
|---|---|---|
Content | Content | The WYSIWYG Editor |
Image
An image widget allows you add images, videos and even PDF’s to any page. If you want to know more about the “Media gallery” Read more
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Option | Tab | Description |
|---|---|---|
Image | Content | The media picker |
Aspect ratio | Configuration | You can use the default aspect ratio of the object, but can also enforce one. |
Border radius | Configuration | This enables you to “round off” the corners of the object. |
Image grid
An image grid widget allows you to create an grid of media objects. You decide how many on a row, what space between etc.. If you want to know more about the “Media gallery” Read more
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Option | Tab | Description |
|---|---|---|
Images | Content | Add images by clicking the “Add new item” button, sort them by dragging and duplicate by clicking the duplicate icon |
Aspect ratio | Configuration | You can use the default aspect ratio of the object, but can also enforce one. |
Image mode | Configuration | When you have selected an Aspect ratio, it may be that some of your images dont meet that ratio, by using the option: “Cover” all images will cover the full aspect-ratio effectively cutting off some parts of the image. By using the option: “Contain“ the image will contain itself within the chosen aspect ratio. |
Border radius | Configuration | This enables you to “round off” the corners of the objects. |
Images per row | Configuration | How many images should appear per row. (You can change this amount per device type) |
Gap | Configuration | The amount of pixels between the images in the grid. |
Counter
The counter widget is often used as a “fun” way to tell your website visitor about the scale/culture of your company.
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Option | Tab | Description |
|---|---|---|
Title | Content | The title on top of the counters |
Counters | Content | One of possibly multiple counters, just click “Add new item” to add a new one. |
Counters > Number | Content | A numeric value, that will be animated from 0 to the value |
Counters > Text after number | Content | A symbol you might want to have after the number, for example: “%” or “$” |
Counters > Label | Content | The subject of the number for example: “Cups of coffee” |
Counters > Icon | Content | Pick an icon from the built in Font Awesome library |
Items per row | Configuration | How many counter should be next to each other. (You can change this amount per device type) |
Gap | Configuration | The amount of pixels between the images in the grid. |
Animation time | Configuration | How long the “Counting up” animation should take to count to the number from 0. |
Icon background color | Configuration | The icon is contained within a circle, pick a background color |
Icon color | Configuration | The icon can have any color |
Number color | Configuration | The color of the numeric value & it’s optional text after |
Label color | Configuration | The color of the label |
Border radius | Configuration | This enables you to “round off” the corners of the objects. |
Slider
You may have seen “Logo sliders” before on websites, the slider widget allows you to add the same functionality to your website. You can pick multiple images and let them animate from left to right.
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Option | Tab | Description |
|---|---|---|
Title | Content | The title on top of the images, you can remove it by leaving it empty. |
Images | Content | One of possibly multiple images, just click “Add new item” to add a new one. |
Counters > Number | Content | A numeric value, that will be animated from 0 to the value |
Slides per view | Configuration | The amount of slides shown at a single time. (You can change this amount per device type) |
Gap between slides | Configuration | The amount of pixels between the slides. |
Aspect ratio | Configuration | You can use the default aspect ratio of the object, but can also enforce one. |
Image mode | Configuration | When you have selected an Aspect ratio, it may be that some of your images dont meet that ratio, by using the option: “Cover” all images will cover the full aspect-ratio effectively cutting off some parts of the image. By using the option: “Contain“ the image will contain itself within the chosen aspect ratio. |
Slider speed | Configuration | The amount of time until the next slide shows |
Slider transition | Configuration | The animation time, the amount of time the animation from previous to next slide takes |
Slider Autoplay | Configuration | If enabled the slider will start moving on it’s own without user interaction |
Slider pagination | Configuration | You can choose to add “bullets” below the slides, so it’s more clear it’s a slider. |
Contact us
A widget showing the visitor contact options you might have, like phone number, email, whatsapp etc..
Note: This widget will get the best looking appearance when you change the background color of the section around it. Learn more about section configuration.
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Option | Tab | Description |
|---|---|---|
Title | Content | The title in front of the contact options |
Contact options | Content | One ore more clickable items with an Icon & text. Click on “Add new item” to add a new option |
Contact options > Link | Content | The link that should be triggered when the item is clicked. Examples are: “mailto:example@domain.com“ or “tel:+31612345678" |
Contact options > Label | Content | The label that actually shows on the page |
Contact options > Icon | Content | Pick an icon from the built in Font Awesome library |
Icon background color | Configuration | Each icon will have a circle background, this set’s the color of that circle |
Icon color | Configuration | You may pick any color that the icons will be |
Icon type | Configuration | The display mode of the icon, Regular or Solid |
Embed
The embed widget is one of the more “technical” widgets, that allow you to include third party content on your website. Things like Youtube video’s, LinkedIn posts and Google Maps frames.
Most times the code you will paste here consists of an iframe that loads some third party content.
Note: It can be dangerous to blindly include third party code on your website, if you are not sure if code is valid and/or safe to use; do not include it.
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Option | Tab | Description |
|---|---|---|
Embed code | Content | A HTML input where you can paste the Embed code |
Border radius | Configuration | We will try to round of the corners of the third party content, as it is third party we can’t always do this. |
Aspect ratio | Configuration | By default the aspect ratio of the third party content, if set: we will try to enforce one, as it is third party we can’t always do this. |
Employee overview
A grid of employees, with Photo, name, role & contact icons
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Option | Tab | Description |
|---|---|---|
Title | Content | The title above the grid of employees |
Employees | Content | One ore more employees. Click on “Add new item” to add a new employee. Drag to sort. |
Employees > Name | Content | The name of the employee |
Employees > Image | Content | The photo of the employee. |
Employees > Role | Content | The function title/role of the employee |
Employees > WhatsApp | Content | The phone number of the employee |
Employees > Phone | Content | The phone number of the employee |
Employees > LinkedIn | Content | The full URL of the employee’s LinkedIn profile |
Border radius | Configuration | This enables you to “round off” the corners of the photo. |
Background color | Configuration | One of your brand colors, that will be set behind the employees photo. (By default none) |
Aspect ratio | Configuration | You can use the default aspect ratio of the photo, but can also enforce one. |
Image mode | Configuration | When you have selected an Aspect ratio, it may be that some of your photos don’t meet that ratio, by using the option: “Cover” all images will cover the full aspect-ratio effectively cutting off some parts of the image. By using the option: “Contain“ the image will contain itself within the chosen aspect ratio. |
Employees per row | Configuration | The number of employees that fit on a horizontal row |
Gap | Configuration | The amount of pixels in between employees |
Testimonials Slider
A slider with one or multiple customer/candidate testimonials per slide.
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Option | Tab | Description |
|---|---|---|
Title | Content | The title above the testimonial slider (if empty it wont show) |
Quotes | Content | One or more quotes |
Quotes > Name | Content | The name of the candidate or customer |
Quotes > Function | Content | The role/function/job title of the candidate/customer, with possibly a company name |
Quotes > Quote | Content | The “Quote” of this person |
Slides per view | Configuration | The number of “quotes” that will be in view |
Slider speed | Configuration | How much time should pass before the slider will automatically move on to the next slide |
Slider transition | Configuration | The time transitioning between slides should take (animation time) |
Slider autoplay | Configuration | Whether to automatically play the slider |
Slider pagination | Configuration | The type of “pagination” when there are multiple slides, by default this is “Bullets” |
Border radius | Configuration | Define how rounded the “card” should be |
Image mode | Configuration | Decide how the photo or the candidate/customer shows within the small circle |
Quote background color | Configuration | You can pick another background color for the “card” the quote is in |
Quote text color | Configuration | Make sure to pick a color that contrasts with the background of the “card” |
Header basic
Most web pages will start with a header, a big visual with some text on top. Telling the user what that page is about.
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Option | Tab | Description |
|---|---|---|
Content | Content | The content that appears on top of the image |
Image | Content | The image or video behind the content. A darkening effect is applied automatically and can’t be removed. |
Aspect ratio | Configuration | The Aspect-ratio of the Header. (You can change this per device type). Do note that if the content exceeds the image height (due to aspect ratio) it will push the height of the image as well. |
Header advanced
Most webpages will start with a header, a big visual with some text on top. Telling the user what that page is about.
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Option | Tab | Description |
|---|---|---|
Content | Content | The content that appears on top of the image(s) |
Slides | Content | The images and/or videos behind the content. |
Aspect ratio | Configuration | The Aspect-ratio of the Header. (You can change this per device type). Do note that if the content exceeds the image height (due to aspect ratio) it will push the height of the image as well. |
Slider animation | Configuration | By default the slides will be “Sliding”, you can also choose for a Fading animation or even a “Coverflow” animation |
Slider speed | Configuration | The amount of time until the next slide shows |
Slider transition | Configuration | The animation time, the amount of time the animation from previous to next slide takes |
Slider Autoplay | Configuration | If enabled the slider will start moving on it’s own without user interaction |
Slider pagination | Configuration | You can choose to add “bullets” below the slides, so it’s more clear it’s a slider. |
Overlay color | Configuration | A #HEX color code that allows transparency so you can change how dark/light the overlay on top of the media is. |
Header shapes
This header allows you to add "mask” an image/video with a special shape.
Like in most widgets there are 2 tabs with settings: “Content“ & “Configuration”
Note: This widget will get the best looking appearance when you change the background color of the section around it. Learn more about section configuration.
Option | Tab | Description |
|---|---|---|
Content | Content | The content that appears on the left side of the image |
Image | Content | The image or video next to the content that will be masked with a shape. |
Header shape | Configuration | You can pick any of the shapes that fit your brand the best, examples are: square, rounded, circulair, arrow, organic etc.. |
Space around image | Configuration | Some shapes appear better when there is some space around them. |
Aspect ratio | Configuration | The aspect ratio of the image or video, as the shapes also have a aspect-ratio be careful with how you configure it. |
Troubleshooting
If you have any questions that can not be solved using the helpdesk, the site builder tour, or the individual information icons, please reach out to us by opening a support ticket.