diff --git a/app/_data/schemas/frontmatter/tags.json b/app/_data/schemas/frontmatter/tags.json index 571c3211d87..dbb90be8e62 100644 --- a/app/_data/schemas/frontmatter/tags.json +++ b/app/_data/schemas/frontmatter/tags.json @@ -4,6 +4,7 @@ "enum": [ "1password", "a2a", + "accessibility", "access-control", "account-management", "after-response-scripts", diff --git a/app/_how-tos/dev-portal/equalweb.md b/app/_how-tos/dev-portal/equalweb.md new file mode 100644 index 00000000000..bc4788fb05d --- /dev/null +++ b/app/_how-tos/dev-portal/equalweb.md @@ -0,0 +1,126 @@ +--- +title: "Add the EqualWeb accessibility widget to {{site.dev_portal}}" +permalink: /dev-portal/equalweb/ +description: "Learn how to add the EqualWeb accessibility widget to all pages of your {{site.konnect_short_name}} Dev Portal." +content_type: how_to +related_resources: + - text: About {{site.dev_portal}} + url: /dev-portal/ + - text: Add the Google Tag Manager script to {{site.dev_portal}} + url: /dev-portal/google-tag-manager/ + - text: Send {{site.dev_portal}} events data to Google Analytics + url: /dev-portal/google-analytics/ +automated_tests: false +products: + - dev-portal + - gateway +works_on: + - konnect + +tldr: + q: How do I add EqualWeb to my {{site.dev_portal}}? + a: | + Configure the EqualWeb widget with your {{site.dev_portal}} domain. + In your {{site.dev_portal}} settings, click the **Integrations** tab and enable the EqualWeb integration. + Add your EqualWeb site key and widget configuration. +tags: + - accessibility +prereqs: + skip_product: true + inline: + - title: "{{site.dev_portal}}" + include_content: prereqs/dev-portal-create-ui + icon_url: /assets/icons/dev-portal.svg + - title: EqualWeb + content: | + You need an [EqualWeb](https://www.equalweb.com/) account. + icon_url: /assets/icons/third-party/equalwebicon.png +--- + +You can add the [EqualWeb](https://www.equalweb.com/) accessibility widget to your {{site.dev_portal}} to help meet your organization's accessibility requirements. +After it's configured, the EqualWeb widget script will be injected into every page of your {{site.dev_portal}}. + +## Get your EqualWeb site key + +Before you configure the integration in {{site.konnect_short_name}}, you need your {{site.dev_portal}} domain and your EqualWeb site key. + +1. In the {{site.konnect_short_name}} sidebar, expand **{{site.dev_portal}}**. +1. Click **Portals**. +1. Click your {{site.dev_portal}}. +1. Copy your {{site.dev_portal}} domain. This is the URL you'll register in EqualWeb. +1. In your EqualWeb account, click **Add new site**. +1. In the **Insert your domain** field, enter your {{site.dev_portal}} domain. +1. Click **Continue to customize design**. +1. Configure the widget design settings as needed. +1. Click **Continue to install widget**. +1. Click **Collapse** for your widget code. This will expand the widget configuration. +1. Copy your site key from the `get sitekey (){ return "79ad2e1..."}` field. For example: `79ad2e1ec52e63565e254555077aaaec`. +1. (Optional) If you configured the widget design, copy the configuration. For example: + + ```json + "Position": "left", + "Menulang": "EN", + "draggable": true, + "btnStyle": { + "vPosition": [ + "80%", + "80%" + ], + "margin": [ + "0", + "0" + ], + "scale": [ + "0.5", + "0.5" + ], + "color": { + "main": "#1c4bb6", + "second": "#ffffff" + }, + "icon": { + "outline": false, + "outlineColor": "#ffffff", + "type": 1, + "shape": "circle" + } + } + ``` + {:.collapsible .no-copy-code} + + {:.info} + > The configuration you copy won't be valid JSON. When you add it to the {{site.dev_portal}} integration configuration, you'll add `{}` to make it valid. + +## Configure the EqualWeb integration + +Configure the EqualWeb integration in your {{site.dev_portal}} settings. + +1. In the {{site.konnect_short_name}} sidebar, expand **{{site.dev_portal}}**. +1. Click **Portals**. +1. Click your {{site.dev_portal}}. +1. Click the **Settings** tab. +1. Click the **Integrations** tab. +1. Click **EqualWeb**. +1. Click the **Enabled** toggle. +1. In the **Site key**, enter the site key from the EqualWeb widget you configured previously. For example: `79ad2e1ec52e63565e254555077aaaec`. +1. (Optional) If you configured the widget design in EqualWeb, click **Advanced configurations** and enter the JSON configuration in the configuration field with opening and closing brackets (`{}`). For example: + + ```json + { + "Position": "left", + "Menulang": "EN", + "draggable": true, + ... + } + ``` + {:.no-copy-code} +1. Click **Save**. + + +You can also configure the EqualWeb integration using the {{site.konnect_short_name}} API by sending a `PUT` request to the [`/portals/{portalId}/integrations` endpoint](/api/konnect/portal-management/v3/#/operations/upsert-portal-integrations). + +## Validate + +You can verify that the integration is working as expected by navigating to your {{site.dev_portal}} URL. +The EqualWeb accessibility widget should display on the page. +It can take several minutes to display the widget after you've enabled the integration. diff --git a/app/_indices/dev-portal.yaml b/app/_indices/dev-portal.yaml index e95a77cb0ac..c8eb701f891 100644 --- a/app/_indices/dev-portal.yaml +++ b/app/_indices/dev-portal.yaml @@ -41,3 +41,8 @@ sections: - path: /dev-portal/sso/ - path: /dev-portal/security-settings/ - path: /dev-portal/self-service/ + - title: Integrations + items: + - path: /dev-portal/google-analytics/ + - path: /dev-portal/google-tag-manager/ + - path: /dev-portal/equalweb/ diff --git a/app/_landing_pages/dev-portal.yaml b/app/_landing_pages/dev-portal.yaml index 28bdda712c3..13e07db32de 100644 --- a/app/_landing_pages/dev-portal.yaml +++ b/app/_landing_pages/dev-portal.yaml @@ -252,7 +252,16 @@ rows: icon: /assets/icons/third-party/google-tag-manager.svg cta: url: "/dev-portal/google-tag-manager/" - + - blocks: + - type: card + config: + title: EqualWeb + description: | + Learn how to add the EqualWeb accessibility widget to your {{site.dev_portal}}. + icon: /assets/icons/third-party/equalwebicon.png + cta: + url: "/dev-portal/equalweb/" + - header: type: h2 text: "References" diff --git a/app/assets/icons/third-party/equalweb.png b/app/assets/icons/third-party/equalweb.png new file mode 100644 index 00000000000..87c7fc1d49e Binary files /dev/null and b/app/assets/icons/third-party/equalweb.png differ diff --git a/app/assets/icons/third-party/equalwebicon.png b/app/assets/icons/third-party/equalwebicon.png new file mode 100644 index 00000000000..4b320ca32b9 Binary files /dev/null and b/app/assets/icons/third-party/equalwebicon.png differ