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.

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.

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.

Button add-ins

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

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.

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.