Jump to content

Custom crypto exchange embed help.

Go to solution Solved by creedon,

Recommended Posts

Hello, I run a popular meme coin on Solana network and I'm trying to embed a custom swap widget from Jupiter exchange. 
I've written the correct embed code which ill paste here below that automatically prompts visitors to swap a currency to the meme coin currency. 

When I preview the embed code in safe mode it shows it drafted correctly however when i view it in incognito or any other browser it resizes by body background and doesnt display the swap widget. any help would be greatly appreciated.

code: 


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jupiter Swap</title>
  <style>
    body {
      background-color: transparent;
      color: white;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    #jupiter-terminal {
      width: 600px;
      height: 1200px;
    }
  </style>
  <script src="https://terminal.jup.ag/main-v2.js" data-preload defer></script>
</head>

<body>
  <h1>Swap</h1>
  <div id="jupiter-terminal"></div>
  <script>
    document.addEventListener("DOMContentLoaded", function () {

      console.log('LOADED')
      
      //create jupiter-terminal div
      const jupiterTerminal = document.createElement('div')
      jupiterTerminal.id = 'jupiter-terminal'
      document.body.appendChild(jupiterTerminal)

      // initialize the terminal
      window.Jupiter.init({
        displayMode: "integrated",
        integratedTargetId: "jupiter-terminal",
        endpoint: "https://mainnet.helius-rpc.com/?api-key=be2d273e-e71f-4cd7-b7a7-81fed6d0a7c0",
        strictTokenList: false,
        formProps: {
            initialInputMint: "So11111111111111111111111111111111111111112",
            initialOutputMint: "BJB5tHWAHboMAwti5AHbCNX17F3jL8ehkh4zuTUx99Zn",
        }
      });
    });
  </script>
</body>

</html>

Screenshot_43.png

Screenshot_44.png

Link to comment
  • Replies 5
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

31 minutes ago, shorky said:

oh i thought i had

You probably did but the forum software doesn't automatically include it in the post. You have to add it to the text of the post for us to see it.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

all good if you guys have any solutions as to the problem i'm having please let me know. tuan used to help me years ago on a different clients project before SS switched to the grid layout. im just wondering if there's an embed i have to do in header or something

 

Link to comment
  • Solution

I don't have a solution but I can describe why things are not working as one might hope.

You've included a full HTML page inside another HTML page and HTML doesn't work that way. It's a syntax error.

A developer would have to see if they can pull out the critical bits and include/modify them to work in a Squarespace site context. Another option might be to host the full page on another hosting service and pull the page in with an iframe in a code block. Each method has its challenges. I would not classify this task as easy.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.