Skip to content
  • There are no suggestions because the search field is empty.

Custom Code Element (beta)

The Custom Code Element lets you add your own custom-coded widget, like a calculator or configurator, directly into a Foleon Doc. It runs contained in its own iFrame, so it can't affect the rest of your page.

In this article:

What is the Custom Code Element?


The Custom Code Element lets you drop any AI-built widget, calculator, or interactive tool straight into your Doc. It runs inside its own isolated iFrame, so nothing it does can break the layout or slow down the rest of your Doc, and it resizes automatically to fit the page. No separate hosting, no dev time, just add your code and publish.

You can build your widget in any AI tool that generates HTML, such as Claude, ChatGPT, Gemini, Lovable, Bolt, or Replit. If you're using a different AI tool, be sure to check if it can generate standalone HTML.

    What can you create?

    Below are some examples of different types of interactive widgets you can create and embed on your page:

    • ROI calculator
      Let prospects calculate the value of your product based on their own inputs. Useful for sales and demand generation content.
    • Pricing configurator
      Help buyers build their own package and see costs in real time. Useful for product-led or self-serve sales content.
    • Knowledge quiz
      Test reader understanding at the end of a training or onboarding Doc. Useful for L&D and enablement content.
    • Product recommender
      Guide readers to the right solution based on a few simple questions. Useful for product marketing and sales support content.
    • Assessment tool
      Let readers score themselves against a benchmark or maturity model. Useful for thought leadership and lead generation content.
    • Interactive checklist
      Help readers track progress. Useful for onboarding, implementation, and customer success content.

    The widget runs in its own contained iFrame, so it can't affect the rest of your page, and it resizes itself automatically as its content changes.

    📖 Only need to embed a link or external page, not your own code? Use URL Embed instead. Learn more in All about the Embed element.

    💡 Want Foleon to help you build the widget for you? Our Professional Services team can help! Contact Professional Services to get started.

    Add a Custom Code Element to your Doc

    Once you've built your widget in an AI tool like Claude or ChatGPT, you can add it to your Foleon Doc.

    1. Copy the HTML code for your widget from your AI tool.
    2. Open your Foleon Doc in the Editor.
    3. Go to Elements and drag the Custom Code element onto your page.
      Custom Code Element - Elements Tab
    4. Paste your HTML code into the code field.
    5. Select I have read and understood the above to confirm you've read the responsibility notice.
    6. Click Preview to make sure the widget has loaded properly.
      Paste code and preview
    7. Click Save to add the element to your page.

    💡 A custom widget doesn't automatically pick up your Doc's Brand Kit styling. If you want it to match your brand, include your colors and fonts in the code itself, or ask your AI tool to styleit that way.

    ⚠️ Foleon doesn't review, endorse, or support Custom Code you add. Your organization is responsible for ensuring your code is lawful and non-infringing, and Foleon may remove non-compliant Custom Code.

    Troubleshooting

    Foleon doesn't provide troubleshooting or support for the code you add to a Custom Code element. If your widget isn't working the way you expect, we recommend going back to the AI tool you used to build it and describing the issue you're seeing. Your AI tool can update the code based on that description.

    💡 Sample instructions you can share with your AI tool will be available soon.