Getting started: the widget

First, we create links for the pages that the widget will display. The standard widget has two tabs, so we choose two pages for this. These could be, for example, two calendar pages or the list of products and a contact form.

Once you have chosen and possibly created the two pages, go to Front pages > Content pages > Maintain pages in the environment configuration. New SEO links can be added here. Two important settings for this are explained below.

Source

Under Source, enter what follows the "/" after the domain name.

• So for https://rondleidingen.i-reserve.net/front?mod=form&form_id=7 you enter front?mod=form&form_id=7.

Alias

Enter what should follow the "/" here. This could be "contact" or "rooms", for example. If you choose "contact", the page will now also be reachable via {your environment URL}/contact (on rondleidingen.i-reserve.net this becomes https://rondleidingen.i-reserve.net/contact, for example).

Now that we have the pages that will be used for the widget, we can start creating the configuration. To do this, go to Front pages > Widget and buttons in the environment configuration.

Add a new configuration here and choose the type Widget. For the widget type, you can choose between a button widget or a tab widget.

In tab one and tab two, search for the SEO links we created in the previous step. The name here is followed by [SEO].

In the fields tab one desc and tab two desc, enter the name that the tabs should be given.

Once you have finished these settings, click the </> button at the bottom of the block. Here you will find the tags that must be included in the head and the body of the page on your website.

If you want to use the widget in multiple languages, there are a number of extra steps to take to set this up correctly.

SEO links

Using SEO links, the same pages can be displayed in different languages.

For https://rondleidingen.i-reserve.net/front?mod=form&form_id=7 enter the following under Source in the SEO links:

• Dutch: front?mod=form&form_id=7&lang=nl
• English: front?mod=form&form_id=7&lang=en
• German: front?mod=form&form_id=7&lang=de

Make sure to use different aliases in the Alias field, for example "contact", "contact-en" and "contact-de"

Widget configurations

Create a separate widget configuration for each language, where you use the SEO links for that language.

Adding to your website

For a language-specific configuration, copy the head and body tags. Then place these on the corresponding language pages on your website.