How to align AI agent chat and embedded form

I am now experimenting with a more narrow width, so that we can ut a form to the right of the agent window. I took the new code you gave me and tried setting the width to 400px which it did but the form next to it seems to have now rolled below the chat box.

I'm using divi in wordpress so I have a 2 column container and each column has an individual code

See page: https://printlabelandmail.com/temp-page-3/

Hi Andrea,

To clarify, do you want to move the bottom form to the AI agent chat side? Can you tell us more on what you want to do? I am not sure if custom CSS code can do that but we will check if that's possible.

Is this what you want? Once we hear back from you, we'll be able to help you with this.

I'm going to backtrack and re-phrase

When I take the code straight from jotform's embed option, the agent displays perfectly

see link: https://printlabelandmail.com/temp-page-3/

This is how I want it, but the chat window is too long again, I want it to be shorter. So I used your new code and that's when the side form somehow moved to the bottom

So really I just need to know how to make the form shorter again.

I hope this makes sense

Thanks

Andrea

Hi Andrea,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

In the meantime, let us know if you need any other help.

Hi Andrea,

I have updated the Iframe code to adjust the height of both the form and the agent. Let me show you how:

1. Copy this embed code for the AI agent and replace it in your website:

<iframe id="JotFormIFrame-251105049244448" title="Clone of PPC Saturation Mailing List Request"

onload="window.parent.scrollTo(0,0)" allowtransparency="true" allow="geolocation; microphone; camera;"

src="https://formjotform.claystructures.com/233314420393953" frameborder="0"

style="min-width:100%;max-width:100%;height:500px!important;min-height:100px!important;border:none;"

scrolling="yes">

</iframe>

2. Copy this embed code for the form and replace it in your website:

<iframe id="JotFormIFrame-251105049244448" title="Clone of PPC Saturation Mailing List Request"

onload="window.parent.scrollTo(0,0)" allowtransparency="true" allow="geolocation; microphone; camera;"

src="https://formjotform.claystructures.com/233314420393953" frameborder="0"

style="min-width:100%;max-width:100%;height:500px!important;min-height:100px!important;border:none;"

scrolling="yes">

</iframe>

That's it. Test your form, and you'll see that the height of the form and the agent have now adjusted. Check out the screencast below for the result:

Give it a try and let us know how it goes.

The 2 codes you replied with are both for the form. Can you send me the AI agent code again please?

thank you so much!

Hi Andrea,

Here is the AI Agent code that is part of the form you are asking for.

https://agent.jotform.com/01963a17fad671898180405fe6cd2a975f54\

Let us know if there’s anything else we can do for you.

I'm sorry, I'm confused with the last reply. The 2 codes that were sent on the last reply from Jefferson were identical. I need the iframe embed code for the agent that was adjusted

Let me know

I appreciate all your help

Hi Andrea,

From the step 1 of my colleague. Please use this AI Agent embed code:

<iframe id="JotFormIFrame-01963a17fad671898180405fe6cd2a975f54"

title="Coach:Mailing

List Consultant" 

allowtransparency="true" allow="geolocation; microphone; camera; fullscreen"

src="https://agent.jotform.com/01963a17fad671898180405fe6cd2a975f54?embedMode=iframe&background=1&shadow=1&isIframeEmbed=1&parentURL=https%3A%2F%2Fprintlabelandmail.com%2Ftemp-page-2%2F"

frameborder="0"

style="

min-width:500px;

max-width:750px;

height:500px !important; /* adjust if needed */

border:none;

width:100%;

margin-bottom: 15px;

" scrolling="no">

</iframe>

<script>

window.jotformEmbedHandler("iframe[id='JotFormIFrame-01963a17fad671898180405fe6cd2a975f54']",

"https://jotform.claystructures.co")

</script>

Give it a try and let us know if you need any help.