Widgets

Widgets get major enhancements - consistency for external sites!

Now you can effortlessly leverage provider and location data that looks and feels like  your site and display that data on any external site!

What it is

Build polished provider and location feeds — or a provider search bar — without writing a line of code. Widgets inherit your site’s brand, so the experience is consistent whether users are on your primary site or a partner destination.

How it works

• In DXE, under Structure > Widgets, use the redesigned visual editor to assemble your widgets — and see a live and responsive preview of what you’re creating.
• Choose a widget type, like a Provider Feed, Location Feed, or Provider Search Bar, then tailor the content using dynamic filters like specialties, conditions, services, or distance, or you can handpick specific providers.
• Control the look and feel with layout options like cards or a carousel, and column counts, pagination, headings, and color selections that pull from your active brand.
• The preview updates instantly, with desktop, tablet, or mobile width presets to validate the experience across devices (learn more below).
   

Why it matters

With these enhancements, you can quickly launch high‑quality provider and location experiences anywhere on the web. Benefits include lowering the need for developer support, speeding up time‑to‑market, and ensuring users get a familiar, trustworthy experience.

How to create Widgets

1. Open the Widget Management screen
   • Go to Structure > Widgets (or open the Manage Widgets link in the DXE toolbar).

   • The management screen lists existing widgets and supports sorting, filtering by title or type, and quick actions (Preview, Get embed code, Edit, Duplicate, Delete).

     

2. Create a new widget
   • Click Create a widget.
   • Choose a widget type (Provider Feed, Location Feed, or Provider Search Bar) and enter an internal Widget Title.

   • Click Create a widget to open the builder.

     

3. Use the builder interface. The widget editor has three primary areas:
   • Control Bar: shows the widget title, a back link to Manage Widgets, Copy Embed Code, Save, and More Actions […] menu with Copy/Delete.
   • Configuration Pane: customize content and appearance. Changes update the preview in real time. You can hide this pane to expand the preview.

   • Preview Pane: live, responsive preview with device-width presets (desktop, tablet, mobile).

     

Widget Types

1. Provider & Location Feeds - The provider and location feed widget displays a collection of providers (or locations) on an external site that match the configurations that you choose.
   • Basics:
     • Title (internal only).
     • Display Type: Card or Carousel.

     • Heading and Subheading (optional) and Heading Alignment.

       

   • Content: Two selection methods:
     • Filter-based: choose filters such as Accepting New Patients, Offers Online Scheduling, Specialty, Conditions Treated, Procedures, Office/Location Name, Affiliations (providers) or Location Near, Distance, Services, Location Types, Merit tags (locations).

     • Manual: search and add specific providers or locations; items appear as tiles and can be reordered or removed.

       

     • Note: When changing the selection method, any filters or previous selections will be removed and the widget’s content will return to the default (all items).You will be asked to confirm the change of selection method.
   • Appearance:
     • Layout: columns (1–6), sort order (alphabetical or random for card view), Show All, Widget # of Providers/Locations (1–100), Pagination (cards only), Show Count.
     • Show All: toggle which elements appear (e.g., Specialties, Ratings, Accepting New Patients, Call to Action, Phone, Address, Images).

     • Colors: edit HEX values or pick from the site’s active Brand palette to maintain visual consistency.

       

2. Provider Search Bar -The provider search bar widget provides a way to place a search field on an external site that features provider data managed within DXE. It includes autocomplete functionality that suggests related names and terms based on the user’s input.

   

   • Basics:
     • Name (internal only), Label, Placeholder, Label Placement (outside or inside the field).
     • Show Autocomplete Suggestions and set a maximum number of suggestions.
     • Search Results Page: default is /providers?search= on the managing site; you can override with a custom URL and parameters.
   • Content:
     • Manage autocomplete groupings (providers, specialties, conditions, procedures); reorder or disable groupings as needed.
   • Appearance:
     • Layout: customize No Results and Error messages.
     • Colors: edit HEX or use Brand palette swatches.
   • Save and manage
     • Use Save in the control bar to persist changes.
     • From the management screen you can Preview (title link), Get embed code, Edit, Duplicate, or Delete (irreversible) widgets.
     • You can also copy embed code directly from the management screen without opening the builder.

Embedding Widgets

There are three embedding methods — choose the one that matches your integration needs:

1. Simple Embed (recommended)
   • Best for full control and responsiveness.
   • In the builder control bar or management screen, click Get embed code or Copy Embed Code to retrieve the single-line script and required CSS/snippets.
   • Place the code on the external site where you want the widget to appear on the page.
2. Iframe Embed
   • Use when you cannot add script/CSS to a page.
   • Copy the iframe code and paste it on the page where you want the widget to load. Note: iframe embeds can be less responsive than the simple embed.
3. API Endpoint
   • Use for full developer control. Retrieve data from the provided API URL and override parameters for each instance by following the DXE API documentation (available on the DXE site at [site-domain]/admin/config/services/openapi).
   • This approach is ideal when building custom UIs or integrating widget data within application logic.

The destination website must use HTTPS (secure protocol) for widgets to work correctly.

Why Widgets are helpful

• No-code: Non-technical users can build and style embeddable widgets using a visual editor and live preview.
• Brand-consistent: Widgets inherit typography, spacing, colors and interaction patterns from your DXE brand and theme settings.
• Flexible content: Display dynamic, filtered results or manually selected items; choose card or carousel layouts and control visible elements.
• Centralized management: Create, copy embed code, duplicate, and delete widgets from a familiar DXE content management screen.
• Multiple embed options: Simple embed, iframe, or API allow you to balance ease-of-use, responsiveness, and development control.
• Responsive and previewable: Live responsive preview with width presets helps validate appearance across device sizes.
• Backwards compatible: Existing widgets remain functional without changes with no added effort for your team.

If you need help with Widgets, please contact Support.