@govflanders/vl-widget-global-header-types 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +22 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ Example of using the entry script:
|
|
|
18
18
|
<!DOCTYPE html>
|
|
19
19
|
<html lang="nl">
|
|
20
20
|
<head>
|
|
21
|
-
<script src="https://widgets.test-vlaanderen.be/api/
|
|
21
|
+
<script src="https://widgets.test-vlaanderen.be/api/v2/widget/9717ae3b-84e8-43b2-a814-e35a2547927f/entry"></script>
|
|
22
22
|
<meta charset="UTF-8" />
|
|
23
23
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
24
24
|
<title>Global header entry script example</title>
|
|
@@ -47,7 +47,7 @@ Example of using the embed script:
|
|
|
47
47
|
<title>Global header embed script example</title>
|
|
48
48
|
</head>
|
|
49
49
|
<body>
|
|
50
|
-
<script src="https://widgets.test-vlaanderen.be/api/
|
|
50
|
+
<script src="https://widgets.test-vlaanderen.be/api/v2/widget/9717ae3b-84e8-43b2-a814-e35a2547927f/embed"></script>
|
|
51
51
|
<div class="your-website-code">👋 Hello world</div>
|
|
52
52
|
</body>
|
|
53
53
|
</html>
|
|
@@ -135,7 +135,7 @@ The `mount` method allows you to control where the **Global Header Widget** is r
|
|
|
135
135
|
When you include the widget via the following script:
|
|
136
136
|
|
|
137
137
|
```html
|
|
138
|
-
<script src="https://prod.widgets.burgerprofiel.vlaanderen.be/api/
|
|
138
|
+
<script src="https://prod.widgets.burgerprofiel.vlaanderen.be/api/v2/widget/__global_header_id__/entry"></script>
|
|
139
139
|
```
|
|
140
140
|
|
|
141
141
|
The widget is **not automatically rendered** on the page. Instead, you must call the `mount` method from the `window.globalHeaderClient` object to display it. This gives you control over where and when the widget is added. You can either:
|
|
@@ -159,7 +159,7 @@ The `mount` method allows you to control where the **Global Header Widget** is r
|
|
|
159
159
|
If you use this script instead:
|
|
160
160
|
|
|
161
161
|
```html
|
|
162
|
-
<script src="https://prod.widgets.burgerprofiel.vlaanderen.be/api/
|
|
162
|
+
<script src="https://prod.widgets.burgerprofiel.vlaanderen.be/api/v2/widget/__global_header_id__/embed"></script>
|
|
163
163
|
```
|
|
164
164
|
|
|
165
165
|
The widget will **automatically render** at the location where the script is placed in the HTML. No additional action is needed to mount the widget in this case.
|
|
@@ -169,6 +169,24 @@ The `mount` method returns a promise that resolves to `true` if the widget was s
|
|
|
169
169
|
|
|
170
170
|
## Notes
|
|
171
171
|
|
|
172
|
+
### Language Switching
|
|
173
|
+
|
|
174
|
+
The widget automatically adapts to the language of the document. It observes the `lang` attribute on the `<html>` tag, so it's the implementer's responsibility to handle any language switching functionality. If the `lang` attribute changes, the widget will update to display the correct language.
|
|
175
|
+
|
|
176
|
+
Supported languages:
|
|
177
|
+
- nl (Dutch)
|
|
178
|
+
- fr (French)
|
|
179
|
+
- de (German)
|
|
180
|
+
- en (English)
|
|
181
|
+
|
|
182
|
+
To change the document language, you can use the following JavaScript snippet:
|
|
183
|
+
|
|
184
|
+
```js
|
|
185
|
+
window.document.documentElement.lang = 'nl'; // 'nl', 'en', 'de' or 'fr'
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
This will switch the document's language to Dutch, and the widget will automatically reflect the change.
|
|
189
|
+
|
|
172
190
|
### Translatable Type
|
|
173
191
|
|
|
174
192
|
The `Translatable<T>` type allows an object to either be a single value or a language-specific dictionary. This is useful when content needs to be available in multiple languages.
|