> ## Documentation Index
> Fetch the complete documentation index at: https://docs.packagesss.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> Embedding and using packages on your sites

export const GridImage = ({window, src, preview = false, img_width = 200, height = 300}) => {
  var host = preview ? '' : 'https://mintlify.s3-us-west-1.amazonaws.com/packages';
  return <div className="grid-image-bg mt-3 mb-3 flex align-items-center" style={{
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative',
    height,
    width: '100%'
  }}>

    <img src={`${host}${src}`} className={'m-0'} width={img_width} style={{
    zIndex: 2,
    width: '100%',
    maxWidth: img_width,
    border: '1px solid #ccc',
    borderRadius: 5,
    boxShadow: '5px 5px rgba(0,0,0,0.25);'
  }} />

    <div style={{
    transform: 'translateX(-50%)',
    left: '50%',
    top: 0,
    position: 'absolute',
    height: '100%',
    width: '100%',
    zIndex: 0,
    overflow: 'hidden',
    pointerEvents: 'none'
  }}>
      <img src={`${host}/images/grid-bg-trans.png`} className="m-0" />
    </div>
  </div>;
};

Embedding a package on your site allows your visitors to use the packages you create without leaving your site.

Here's a quick tutorial on how to do it.

<Steps>
  <Step title="Find a package to embed.">
    Head to your [packages page](https://packages.ai/home/packages) and find a package you want to embed. Once you locate it, hit the 3 dots.

    <GridImage img_width={500} height={500} src={'/images/embed-3-dots.png'} />
  </Step>

  <Step title="Locate &#x22;Widgets&#x22; in the menu.">
    After clicking the 3 dots, you'll see a menu pop up. Click on "Widgets" to open the widget page for that package.

    <GridImage img_width={300} height={500} src={'/images/embed-3-dots-menu.png'} />
  </Step>

  <Step title="Create a new widget">
    Click the "Create New Widget" button to create a new widget for the package. A pop-up will appear.

    <GridImage img_width={500} height={300} src={'/images/embed-new-widget.png'} />
  </Step>

  <Step title="Name the widget and select keys">
    Give your new widget a name and select the keys you want to use. Once you're done, hit "Save Widget".

    <GridImage img_width={500} height={500} src={'/images/embed-name-widget.png'} />
  </Step>

  <Step title="Get the embed code.">
    Click the 3 dots next to the name of the widget and click "Embed Code".

    <GridImage img_width={500} height={500} src={'/images/embed-get-embed-code.png'} />
  </Step>

  <Step title="Copy & paste the code on your site">
    Once the overlay appears, click the clipboard to copy the entire snippet. Paste it on your site where you want the package to appear.

    <GridImage img_width={500} height={500} src={'/images/embed-copy-embed-code.png'} />
  </Step>
</Steps>

That's it! You've successfully embedded a package on your site.

If you have any questions, feel free to post them in the [Facebook group](https://fb.com/groups/nichesss).