APL Widgets

An Alexa Presentation Language (APL) widget is a easy-to-read, self-updating view of content and functionality. Widgets make it possible for users to dive into the latest content of a skill, or take action - like checking an item off a list- right from the home screen, and are both interactive with touch as well as addressable via voice. Depending on the user action, the widget can update inline or ingress into a full-screen experience.

Viewport profiles for widgets

Widgets are supported by a set of viewport profiles. Rather than creating a unique design for each device, all hub devices share a single viewport profile per widget size. You can use these profiles to scale designs throughout all hubs.

Sizing for widgets

Hub Large 352 x 512

Hub Medium 264 x 384

Hub Small 264 x 320

Templates for widgets

To get started with widgets, consider if your experience can use one of Amazon's existing templates or if it needs a custom design. The design system provides reusable templates and components that are responsive on all hub devices. You should use widgets only for lightweight actions to complement a domain experience.

List template

Use the list template to display a list of items, such as a shopping list or reminders list.

Text List

Image List

Text-wrapping template

Use the text-wrapping template for text-forward experiences, such as tips, facts or brief instructions.

Action Button

Use the action button template for text-forward experiences with a focus on a call-to-action (CTA).

Image-caption template

Use the image-caption template for image-forward experiences that need supporting text.

Photo template

Use the photo template for image-forward experiences with the image as the primary or sole content.

Custom templates

Although Amazon designed the generic templates to cover most scenarios, there are instances where content might require a custom template design. Custom templates should follow these APL widget-template design principles to remain cohesive with other widgets.

Unsuitable Use of Images

Don't

Embed text in the image.

Don't

Use images with embedded provider logos.

Don't

Place misleading user interface (UI) elements in the background. These elements can be confusing to users because they can be mistaken for actionable touch targets.