Chris Posted March 31, 2023 Share Posted March 31, 2023 We've been busy working on a new ecosystem for the future of Upmind widgets. The new framework means we can roll out widgets as encapsulated web components, with more features and options than we currently support. This includes localisation, style overrides via CSS variables, a 'Dark mode' option as standard, slot support, global token management and a shared store – which will facilitate cross-widget communication (where necessary). Although a lot of the work has been in developing the underlying framework, we've actually got a couple of new widgets out there and 'in the wild'. One is specific for Upmind registration, but the other is a 'Terms' widget which can be used by anyone as of today. It's a very basic example which retrieves your brand's Terms & Conditions and renders them on the page. You can see it in use on our own site: https://upmind.com/terms –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– To use this widget on your own site, just follow these simple steps: 1. (Required) Include the following `script` tag before the closing `</body>` tag of your site: <script type="module" src="https://embed.upmind.app/upm-widget.js"></script> 2. (Required) Add the following widget element to your site (wherever you want the terms to show). Make sure the 'as' attribute is set to `Terms` (case sensitive). <upm-widget as="Terms"></upm-widget> 3. (Required) Ensure you add the hostname of your site as a 'trusted' domain within your Upmind instance. You can do this from ''{your_upmind_domain}/admin/settings/domains". We do this as it protects your brand and prevents unsolicited widget use. 4. Although already fast and optimised, you can optionally speed up the loading of our widget code by adding these `link` tags to the `<head>` of your site: <link rel="preconnect" href="https://embed.upmind.app"> <link rel="dns-prefetch" href="https://embed.upmind.app"> 5. If your site supports dark mode, you can optionally enable dark mode by adding a `dark-mode` attribute to the widget element: <upm-widget as="Terms" dark-mode></upm-widget> Here is a full page example: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Upmind Terms Widget</title> <link rel="preconnect" href="https://embed.upmind.app"> <link rel="dns-prefetch" href="https://embed.upmind.app"> </head> <body style="background: black;"> <upm-widget as="Terms" dark-mode></upm-widget> <script type="module" src="https://embed.upmind.app/upm-widget.js"></script> </body> </html> –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– This is the first of MANY widgets – we'll be adding lots more soon. We're currently re-building the existing DAC widget into the new framework and we'll notify everyone when this is publicly available (hopefully mid-April). We also have a plan card widget which is also close to completion. Let us know how you get on and please let us know any feedback. 6 2 Link to comment Share on other sites More sharing options...
Recommended Posts