Back to Installing Your Chatbot

How to add a ChatGPT AI support agent to Framer

You want to embed your custom trained AI support agent in your Framer website page. Here's how to add an AI support agent to Framer with SiteSpeakAI.

Framer is a website builder that’s different from traditional drag-and-drop platforms like Wix or Squarespace. It’s essentially a design tool for websites. Instead of just picking pre-made templates, you build your website using code-like components – think of them as building blocks you can customize with CSS (the language that controls how websites look). It’s incredibly powerful for creating interactive and visually stunning websites, especially those with complex animations, micro-interactions, and unique layouts.

Website URL: https://www.framio.com/

Add your AI support agent to your Framer website

In SiteSpeakAI

Log into your SiteSpeakAI account and select your agent from the dropdown menu at the top, click on the Install Agent section in the sidebar, select the Javascript tab and then click on the Copy Code button to copy your agent code snippet. uploads/help-center/images/uTIecwG6uMCnlkMmSAnilee6veY74aGU98aWnFji.png

In Framer

  1. Log into your Framer account and on the dashboard, select the project to edit uploads/help-center/images/WO6b92iHp3wya5V42NMxTLCQyULioLsOsQBanFOJ.png

  2. Click on Settings to open the Site Settings uploads/help-center/images/ntQTFozcnSzFPFo2kMfIiHdbK3vc5pEFcOGpo5qR.png

  3. In the Site Settings dialogue, scroll down to Custom Code and insert your snippet. If you enter it in the End of <head> tag box, Framer will indicate that the page will load faster if you add it in the End of <body> tag. This is your choice. uploads/help-center/images/xYgAfscJBfF5IfmfWI0CLrrH43DxQeklaoOZxsIE.png

  4. Click on Save to save your changes and then on Publish to publish your modified Framer site uploads/help-center/images/0a6JoRDkqkf8XnnCI93PAQ3rlNjTEv8Yjz2yDkZG.png

  5. Your AI support agent button will now be displayed on your Framer website page uploads/help-center/images/Gw8lDOZeABjqo3OMDw3KR3wuamcbVJwfEQAOgJXN.png

  6. If you click on the button it will display the AI support agent dialogue uploads/help-center/images/ofOKyPNz1xE89mydlVioX8VR1NQ4NYyP5RfM2iVd.png

Your AI support agent has now been added to your Framer website and your visitors/customers can start interacting with it!

Need more help with SiteSpeakAI?

Not finding what you need? Reach out to our support team for help.

Contact Support

Ready to automate your customer service with AI?

Join over 1000+ businesses, websites and startups automating their customer service and other tasks with a custom trained AI agent.