Problem with Jupiter DEX widget

Design help Custom code
1

Hi,

I am trying to include a widget on my site that allows users to buy a token using the Jupiter terminal (Jupiter Terminal)

I pasted this code in my header (also tried the footer):
<script src='https://terminal.jup.ag/main-v3.js'></script>

And then this one on the page.
I tried Code Block and Code embed but none works. Once published, the widget either doesn’t show or I can see the code lines.
I tried to nest the code blocks indide containers and div blocks but that didnt work either.

<div id="integrated-terminal" style="width: 400px; height: 600px; margin: 0 auto;"></div>
<script>
  window.addEventListener('load', function() {
    window.Jupiter.init({
      displayMode: "integrated",
      integratedTargetId: "integrated-terminal",
      endpoint: "https://api.mainnet-beta.solana.com",
      formProps: {
        fixedOutputMint: true,
        swapMode: "ExactIn",
        initialOutputMint: "DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263",
      },
    });
  });
</script>

This is very frustrating. I remember trying it quickly when I first purchased the subscription and it worked. Now that I’m almost done with the whole site, I can’t seem to get it to work.

The only thing that seems to work is using an iFrame, but then, I cannot specify the token users would buy. Here is the code for the iFrame. It should force users to buy WIF with USDC but it shows different tokens and allows users to choose both inputs and outputs.

<iframe
    src="https://jup.ag/swap?inputMint=EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v&outputMint=EPjFWdd5AufqSSqeM2qDHTpFz8c8hwiKBVPn1usdzKv"
    height="660px"
    width="400px"
    style="border: 0;"
></iframe>

Thanks for your help!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi Tetsuo,

Do you have a published site link on a transaction page? I can have a look for script errors or malformed HTML.

A readonly designer link to the same page would be helpful as well.