Position des Chatbots

  • dgorsler
    Gefragt am 26. Juni 2025 um 06:13

    Hallo Support-Team,

    könnt ihr mir bitte weiterhelfen? Die Position des Chatbots liegt aktuell etwas zu tief und überdeckt wichtige Icons im Footer meiner Website.

    Gibt es eine Möglichkeit, die Position das Chatfenster-Icon etwa 2 cm höher zu platzieren?

    Vielen Dank im Voraus!

    Viele Grüße

    Daniel

    Jotform Thread 28372763 Screenshot
  • Alp
    Geantwortet am 26. Juni 2025 um 08:36

    Hi Daniel,

    You can adjust the position of the AI chatbot window with changing the chatbot's settings or adding a CSS rule in your website.

    In the AI Agent Builder,

    1. Click on Publish on the top of the page.
    2. Click one Chatbot on the left panel of the page.
    3. Under the Position Tab, you can set "Left" or "Right" alignment of the chatbot.

    In your website, you can use Iframe and inject custom CSS Code to align your chatbot.You can find more information in How to Adjust the Position of an AI Chatbot and How to Align AI Agent Chat and Embedded Form.

    I hope this information will suffice to complete your work.

  • dgorsler
    Geantwortet am 26. Juni 2025 um 11:36

    Hi Alp,


    Left and write will not be useful. Could you please proide me with the required Iframe to change the position vertically?


    Thank you very much.


    Daniel

  • Alp
    Geantwortet am 26. Juni 2025 um 12:04

    Hi Daniel,

    Since left and right alignment isn't enough to adjust the chatbot icon's position vertically, you can solve this by inserting an iframe with custom CSS on your website.

    Here's an outline of how to do this:

    1. Create an iframe element for your chatbot code on your website.
    2. Add a rule to the CSS of the iframe or your website to adjust the chatbot icon's positions. As an example, iframe {position: fixed, bottom:2cm, right:20px}.

    You can find similar solution in How to Align AI Agent Chat and Embedded From.

  • dgorsler
    Geantwortet am 26. Juni 2025 um 13:20

    Hey Alp,

    I cant open the Link.

    by there way.. where do i have to put the iframe?

  • Alp
    Geantwortet am 26. Juni 2025 um 13:30

    Hi Daniel,

    To place the chatbot iframe on your website, you need to insert the iframe code into your site's HTML, usually inside the <body> tag. This way, the chatbot will appear on the pages where you add the code.

    Here’s what you can do:

    1. Get the iframe embed code from your chatbot platform.
    2. Open your website's HTML or the area where you can add custom HTML.
    3. Paste the iframe code where you want the chatbot to show up, typically near the end of the <body> section.
    4. Add some CSS to move the chatbot icon higher on the page. For example:
    5. iframe { position: fixed; bottom: 2cm; right: 20px; }

    This CSS will fix the chatbot's position on the screen. You can adjust these values depending on your needs.

    Hope this helps.

  • dgorsler
    Geantwortet am 27. Juni 2025 um 02:42

    I hope you're doing well.

    Could you please provide me with the complete code for the iFrame used to integrate the chatbot into our website?

    I want to make sure it’s implemented correctly and customize it if needed. Having the full code would help me avoid any display or functionality issues on my end.

    Thank you in advance for your assistance.

  • Alp
    Geantwortet am 27. Juni 2025 um 03:26

    Hi Daniel,

    I can't assist you to customize your code since I don't know your complete project. I can only provide you an example of the full iframe code you can use:

    <iframe src="YOUR_CHATBOT_URL" style="position: fixed; bottom: 2cm; right: 20px; width: 350px; height: 500px; border: none;"></iframe>

    You can try to replace YOUR_CHATBOT_URL with the actual link to your chatbot. You have to make sure to put this iframe code inside the <body> section of your website’s HTML so it shows up on your pages.

    Hope this will help.

Your Reply