Dynamic Slots

Overview
How it works
Use cases
Visual Examples

Overview

HTML slots serve as placeholders within the SCAYLE checkout Webcomponent that allows HTML or even web components to be injected within the checkout. This drastically extends the capabilities and customization and allows you to go above and beyond our core feature set to achieve the desired results.

How it works

Create a new HTML element

Add slot attribute that matches the desired replacement slot's name

Inject the necessary styles

Append the newly created element to the scayle-checkout web component

Please see the next step for integrating slots for detailed examples to help you get started.

Use cases

While choosing the placement options for where slot elements are exposed, this was done with a broad range of business use cases in mind. These are general suggestions but since slots offer an open approach, developers are encouraged to push the limits to see what is possible.

Static HTML element injection

Instead of relying on the limitations of text-only dynamic fields, you can include more enhanced elements that include images, text, and are styled in any way you please to fit a desired use case.

Third party shipping providers

SCAYLE offers a wide range of shipping options out of the box, but sometimes this is not enough. With dynamic slots in tandem with middleware, there is now the possibility of developing external third party solutions such as Ingrid or ShipperHQ on your own, and then replacing our delivery options component completely in favor of this new solution.

Upselling items within the basket

Does your shop offer discounts based on basket value, or do you simply want to encourage users to purchase even though they have initiated a checkout session already? By using the slot elements within the basket component you can use the Storefront API to show an item, add it to the basket and then get the updated basket state via our exposed checkout mutations.

Changing the order of payment methods

Are you curious how the order of displayed payment methods could affect conversion rates? By using your own A/B testing solution in the storefront, and re-ordering the array of payment methods on the fly based on test groups you can better visualize this data.