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

# Integration with page builders

> Integrate Assortion with PageFly, GemPages, and other page builders

If you're using a page builder to create custom product pages, you can easily integrate Assortion widgets using HTML snippets.

## Widget HTML Codes

Copy and paste these HTML snippets into your page builder:

<CodeGroup>
  ```html Volume Discount theme={null}
  <div id="ast-vd-container"></div>
  ```

  ```html Frequently Bought Together theme={null}
  <div id="ast-bundle-container"></div>
  ```

  ```html Product Add-ons theme={null}
  <div id="ast-addon-container"></div>
  ```
</CodeGroup>

## Page Builder Instructions

<Tabs>
  <Tab title="PageFly">
    ### Adding widgets to PageFly

    1. Open your page in the PageFly editor
    2. Add an **HTML/Liquid** block where you want the widget
    3. Paste the appropriate HTML snippet from above
    4. Save and publish your page

    <Card icon="external-link" title="PageFly Documentation">
      [Learn more about using HTML blocks in PageFly →](https://help.pagefly.io/manual/getting-started-with-pagefly/using-html-liquid-block)
    </Card>
  </Tab>

  <Tab title="GemPages">
    ### Adding widgets to GemPages

    1. Open your page in the GemPages editor
    2. Add a **Liquid** block to your page
    3. Paste the appropriate HTML snippet from above
    4. Save and publish your page

    <Card icon="external-link" title="GemPages Documentation">
      [Learn more about using Liquid blocks in GemPages →](https://help.gempages.net/en/article/liquid-block-2058092)
    </Card>
  </Tab>

  <Tab title="Other Builders">
    ### General instructions

    Most page builders support custom HTML or Liquid blocks:

    1. Look for an HTML, Custom Code, or Liquid block option
    2. Add the block where you want the widget to appear
    3. Paste the appropriate HTML snippet
    4. Save and publish your changes

    <Tip>
      If your page builder doesn't support HTML blocks, contact their support team for guidance on adding custom code.
    </Tip>
  </Tab>
</Tabs>

## Widget Placement Tips

<AccordionGroup>
  <Accordion title="Optimal placement locations">
    * **Volume Discount**: Near the product price or quantity selector
    * **Frequently Bought Together**: Below the main product information
    * **Product Add-ons**: Above or near the add to cart button
  </Accordion>

  <Accordion title="Multiple widgets on one page">
    You can add multiple widgets to the same page. Each widget will automatically detect and display relevant offers based on your configuration.
  </Accordion>

  <Accordion title="Mobile optimization">
    All Assortion widgets are fully responsive and will adapt to mobile layouts automatically.
  </Accordion>
</AccordionGroup>

## Troubleshooting

<Warning>
  Make sure you're adding the HTML snippet to a product page or a page that has product context. Widgets won't display on pages without product information.
</Warning>

### Common Issues

| Issue              | Solution                                               |
| ------------------ | ------------------------------------------------------ |
| Widget not showing | Ensure the offer is active in your Assortion dashboard |
| Wrong position     | Try placing the HTML block in a different section      |
| Display issues     | Clear your browser cache and refresh the page          |

## Need Help?

If you need assistance integrating with your specific page builder, contact our support team at [support@assortion.com](mailto:support@assortion.com).