Jupiter Developers

This guide walks through integrating Jupiter Plugin into a plain HTML application from scratch. You will add the plugin script tag, initialize with window.Jupiter.init(), and serve the page with http-server.

Prerequisites

Before you begin, make sure you have the following installed on your system. Node.js and npm: Download and install from nodejs.org http-server: Download and install http-server from npm

Step 1: Create a New HTML Project

Head to your preferred directory and create a new folder for your project:

mkdir plugin-democd
plugin-demotouch
index.html

Step 2: Add the Plugin Script

Add the Plugin script to your project:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jupiter Plugin Demo</title>
    <script src="https://plugin.jup.ag/plugin-v1.js" data-preload defer></script>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Jupiter Plugin Demo</h1>
        <div id="jupiter-plugin"></div>
    </div>

    <script>
        window.onload = function() {
            window.Jupiter.init({
                displayMode: "widget",
                integratedTargetId: "jupiter-plugin",
            });
        };
    </script>
</body>
</html>

Step 3: Run the Project

Run the project using http-server:

http-server

There you have it! You’ve successfully integrated Jupiter Plugin into your HTML application.

Please test the swap functionality and check the transaction.
If you require more customizations, check out the Plugin Playground or the Customization documentation.
If you have any questions or issues, please refer to the FAQ or contact us on Discord.

Tool Kits

Jupiter Plugin

Jupiter Wallet Kit

Jupiter Referral Program

HTML App Example

Prerequisites

Step 1: Create a New HTML Project

Step 2: Add the Plugin Script

Step 3: Run the Project

​Prerequisites

​Step 1: Create a New HTML Project

​Step 2: Add the Plugin Script

​Step 3: Run the Project

Prerequisites

Step 1: Create a New HTML Project

Step 2: Add the Plugin Script

Step 3: Run the Project