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 Experience > 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 the component code, make the following changes:
   Select a tabNext.js (page router)Next.js (app router)

   src/canvas/VideoPlayer.tsx

   /* eslint-disable */ // @ts-nocheck import { FC } from 'react'; import classNames from 'classnames'; import { UniformText, UniformSlot } from '@uniformdev/canvas-react'; import { getTextClass } from '@/utilities/styling'; import { VideoPlayerProps } from '.'; export const VideoPlayer: FC<VideoPlayerProps> = ({ title, description, source, id }) => ( <div className={classNames('hero min-h-[500px] relative', 'text-secondary-content')}> <div className={classNames('hero-content text-center p-0')}> <div className={classNames('flex flex-col mx-1 md:mx-10')}> <UniformText parameterId="title" as="h1" className={classNames('font-bold', getTextClass('h5'))} placeholder="Title goes here" /> <UniformText parameterId="description" as="div" className={classNames('py-6')} placeholder="Description goes here" /> <div className="border-dashed border-4 border-gray-300 p-5 text-gray-300"> {source === 'YouTube' && ( <iframe width="560" height="315" src={`https://www.youtube.com/embed/${id}`} title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen ></iframe> )} {source === 'Loom' && ( <iframe width="640" height="360" src={`https://www.loom.com/embed/${id}`} frameborder="0" webkitallowfullscreen mozallowfullscreen allowFullScreen ></iframe> )} {!source && <div className=" text-gray-300">Select a video source</div>} </div> <UniformSlot name="related" /> </div> </div> </div> );

   CopyCopied!

Add components to slot#

1. In Uniform, open the project map.
2. Navigate to Home > Articles > The Golden Ratio of Coffee.
3. Select the video player component.
4. Click Add Call to Action.
5. Enter content for the new component.
6. Click Publish.