Integrate AI chatbots with Potion

Step-by-Step Guide to Integrate Custom HTML into Potion

1. Open Your Potion Website: Launch your Potion website in Google Chrome.

2. Inspect Elements: Right-click on the element you want to customize and select "Inspect". This opens the developer tools where you can see the HTML and CSS.

3. Edit CSS: In the styles section, you can edit the CSS directly to preview changes.

4. Access Snippet Injection: Go to the Potion editor and ensure you are on "Default Settings". Click on "Edit Page Html".

5. Add Custom CSS: Insert your CSS code within <style> </style> tags in the snippet injection editor. For example:

   <style>
   .notion-viewport {
       padding: 0;
   }
   .notion-header {
       display: none;
   }
   </style>
   

6. Save Changes: After adding your styles, save your changes. Navigate back to your site to see the updates immediately.

7. Utilize Special Classes: Use special classes like Notion Block Id class, index-page class, and page block id class for targeted styling.

By following these steps, you can effectively integrate custom HTML and CSS into your Potion-built website.

How to integrate OpenAssistantGPT with Potion

1. Create your OpenAssistantGPT chatbot

   Sign in to your OpenAssistantGPT dashboard and create a new chatbot or select an existing one.

2. Configure your chatbot settings

   Customize your chatbot's appearance, behavior, and knowledge base to match your website's needs.

3. Get your embed code

   In your OpenAssistantGPT dashboard, go to the "Deployment" section and copy your unique embed code.

4. Add the embed code to your Potion website

   Log in to your Potion account, open your website editor, and add an HTML or Custom Code element to your site. Paste the OpenAssistantGPT embed code into this element.

5. Publish your website

   Save your changes and publish your website to make the chatbot live.