SKY Add-ins overview

SKY Add-ins allow developers to build complementary features that integrate deeply within the user interface of Blackbaud's solutions. With add-ins, developers can use familiar web development technologies such as HTML, CSS, and JavaScript to augment out-of-box product areas with new functionality.

For example, with add-ins you can:

  • Add custom tiles, buttons, flyouts, and modals to selected pages in the system - bring in data from external systems that is contextually relevant to the current record and provide streamlined workflows for business logic.
  • Introduce new pages - incorporate new full-page content into the system, keeping users in-product for the best user experience
  • Create rich, interactive user experiences - expose new 3rd-party visualizations, including content from Microsoft Power Apps and Power BI as well as content from other providers

Add-ins are implemented as web applications that run external to the Blackbaud host application, so they can do almost anything that a webpage can do inside a browser. At runtime, the host application provides an isolated sandbox iframe that contains the add-in page, and provides context values needed to load the add-in.

Raiser's Edge NXT with a highlighted area for your custom tile.

The add-ins framework provides the following:

  • A "write-once, run anywhere" model - SKY add-ins provide cross-platform/browser/device support, so they appear on and work great from mobile devices as well as desktop browsers.
  • Uses standard web technologies - add-ins are web applications, so you can use any framework/tech stack/libraries desired, both client-side and server-side. For example, use ASP.NET, PHP, Node.js, MVC, Angular, React, etc.
  • Easy deployment - add-ins are deployed to your cloud, so you control how and when your add-in is updated.
  • Single sign-on (SSO) - add-ins integrate easily with 3rd-party systems.
  • Communicate with the host application using SKY API.
  • Associated with SKY applications - when customers enable your SKY application, they'll see the add-ins you've defined.

For consistency, efficiency at scale, and the most cohesive visual experience, we use the SKY UX ecosystem at Blackbaud. To support that ecosystem, we have also created a first-class SKY Add-in Angular Service.

While a SKY UX / Angular implementation works best for us, it is not a requirement for creating a SKY Add-in. Check out how to use the generic sky-addin-client in our vanilla sky-addin example.

Add-ins are defined as part of your SKY application within the SKY API developer portal. There are two basic components of an add-in: an extension point (described below) and the URL of your own web application.

Components of an add-in.

Add-ins are associated with specific locations within the Blackbaud user interface, known as extension points. The extension point represents a named location in the user interface where add-ins can be rendered, and it defines both the "class" of add-in (tile, button, tab, etc.) as well as the shape of the context values that will be provided at runtime.

Tile add-ins

Tile add-ins can be created for selected pages within the system that support a dashboard of tiles. Custom tiles will persist state and location on a per-user basis along with other native tiles.

Tile add-ins

Button add-ins

Button add-ins can be created for selected pages within the system that support page-level actions.

Button add-ins

Page add-ins

Page add-ins can be created to provide full-page user experiences that maximize the screen real estate and keep users in-product.

Page add-ins

Future add-ins

Over time, we'll introduce support for new types of add-ins and new extension points within the system.

  • View the Getting started tutorial to learn more about how to build a SKY Add-in.
  • View the SKY UX tile sample to see a detailed walkthrough of building an add-in using SKY UX.
  • View the Hello World sample to see a detailed walkthrough of building an add-in using simple HTML, CSS, and JavaScript.
  • View additional concepts and capabilities associated with the SKY Add-ins framework.
  • View our design guidelines to read about building an effective and compelling user experience for your add-in.