Add a slot

Canvas guides how business users work with your front-end design. Configure your project's design system and style guide so Canvas can make composing pages and experiences intuitive and consistent.

Manage this configuration through slots (or placeholders) and slot restrictions. In the previous lesson, you created a new component for your project. Now you'll walk through creating a new slot in that component.

For this exercise you'll add a new, related content slot in the Video Player component. With this, users can add related content (such as a CTA) to a video. During the lesson you will:

Add a slot to the Uniform component definition#

1. In Uniform, navigate to Content > Components.
2. Open the component Video Player.
3. Click Slots.
4. Click Add slot.
5. Enter the following values:

   Field	Value
   Slot Name	Related
   Public ID	related
   Allowed Components	Specify allowed components

6. From the list of components, select Call to Action.
7. Click OK.
8. Click Save and close.

Add slot to front-end component#

1. In your source code, update the following file:

   src/canvas/VideoPlayer.tsx

   CopyCopied!Wrap

Add components to slot#

1. In Uniform, open the project map.
2. Navigate to Home > Articles > The Golden Ratio of Coffee.
3. Under the video player component, click the + next to VideoPlayer Related.
   
4. Add one or two new component using Call to Action.
5. Click Publish.