title: Adding connect wallet button to HTML - Solana blockchain
body: <p>I am trying to create a Django/Python app on Solana blockchain.
  I have been trying to figure out how I can add &quot;Connect Wallet&quot; button on HTML just like on this website. <a href="https://i.stack.imgur.com/06fHu.png" rel="nofollow noreferrer">enter link description here</a></p>
  <p>I would appreciate if anyone can guide me on this.</p>
  <p>Thanks in advance,
  Best regards,
  Shashank</p>
  <p><strong>Edit:</strong>
  I couldn't figure out how I can use information in below stackoverflow page.
  <a href="https://stackoverflow.com/questions/68989348/solana-adding-sollet-phantom-wallet-connect-to-my-website-steps">Solana : Adding Sollet / Phantom Wallet Connect to my website - Steps?</a></p>
  <p>I have managed to replicate the page using saber page by using following links, but whole page is created with JS rather HTML. And that JS is over 20k lines.
  <a href="https://app.saber.so/static/js/2.40df4ba6.chunk.js" rel="nofollow noreferrer">https://app.saber.so/static/js/2.40df4ba6.chunk.js</a>
  <a href="https://app.saber.so/static/js/main.cc5b37d9.chunk.js" rel="nofollow noreferrer">https://app.saber.so/static/js/main.cc5b37d9.chunk.js</a></p>
  <p>I have also looked up other projects like below, to get an understanding on how I can setup a 'connect button'. Below example connects a metamask wallet.
  <a href="http://blog.adnansiddiqi.me/develop-your-first-decentralized-ecommerce-application-with-python-flask-and-metamask/" rel="nofollow noreferrer">http://blog.adnansiddiqi.me/develop-your-first-decentralized-ecommerce-application-with-python-flask-and-metamask/</a></p>
  <p>I tried to contact few poeple on Fiverr as well, if someone can guide but no luck there as well.</p>
  <p>All I want is a button &quot;Connect wallet&quot;, which works similar to saber.so website. And then read the wallet contents using python.</p>
  <p>I would really appreciate if someone can guide me please.</p>
  <p>Screenshot below:
  <a href="https://i.stack.imgur.com/06fHu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/06fHu.png" alt="enter image description here" /></a></p>
  <p>Codes below:</p>
  <pre><code>&lt;link href=&quot;https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;display=swap&quot; rel=&quot;stylesheet&quot;/&gt;
      &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Roboto+Mono&amp;display=swap&quot; rel=&quot;stylesheet&quot;/&gt;
      &lt;style&gt;#root{height:100%}&lt;/style&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css&quot; integrity=&quot;sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==&quot; crossorigin=&quot;anonymous&quot;/&gt;
      &lt;link href=&quot;/static/assets/css/2.5e01e2e9.chunk.css&quot; rel=&quot;stylesheet&quot;&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
      &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
      &lt;script async src=&quot;https://platform.twitter.com/widgets.js&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
      &lt;script&gt;
      !(function (e) {
          function r(r) {
          for (
              var n, a, f = r[0], i = r[1], l = r[2], p = 0, s = [];
              p &lt; f.length;
              p++
          )
              (a = f[p]),
              Object.prototype.hasOwnProperty.call(o, a) &amp;&amp; o[a] &amp;&amp; s.push(o[a][0]),
              (o[a] = 0);
          for (n in i) Object.prototype.hasOwnProperty.call(i, n) &amp;&amp; (e[n] = i[n]);
          for (c &amp;&amp; c(r); s.length; ) s.shift()();
          return u.push.apply(u, l || []), t();
          }
          function t() {
          for (var e, r = 0; r &lt; u.length; r++) {
              for (var t = u[r], n = !0, f = 1; f &lt; t.length; f++) {
              var i = t[f];
              0 !== o[i] &amp;&amp; (n = !1);
              }
              n &amp;&amp; (u.splice(r--, 1), (e = a((a.s = t[0]))));
          }
          return e;
          }
          var n = {},
          o = { 1: 0 },
          u = [];
          function a(r) {
          if (n[r]) return n[r].exports;
          var t = (n[r] = { i: r, l: !1, exports: {} });
          return e[r].call(t.exports, t, t.exports, a), (t.l = !0), t.exports;
          }
          (a.m = e),
          (a.c = n),
          (a.d = function (e, r, t) {
              a.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t });
          }),
          (a.r = function (e) {
              &quot;undefined&quot; != typeof Symbol &amp;&amp;
              Symbol.toStringTag &amp;&amp;
              Object.defineProperty(e, Symbol.toStringTag, { value: &quot;Module&quot; }),
              Object.defineProperty(e, &quot;__esModule&quot;, { value: !0 });
          }),
          (a.t = function (e, r) {
              if ((1 &amp; r &amp;&amp; (e = a(e)), 8 &amp; r)) return e;
              if (4 &amp; r &amp;&amp; &quot;object&quot; == typeof e &amp;&amp; e &amp;&amp; e.__esModule) return e;
              var t = Object.create(null);
              if (
              (a.r(t),
              Object.defineProperty(t, &quot;default&quot;, { enumerable: !0, value: e }),
              2 &amp; r &amp;&amp; &quot;string&quot; != typeof e)
              )
              for (var n in e)
                  a.d(
                  t,
                  n,
                  function (r) {
                      return e[r];
                  }.bind(null, n)
                  );
              return t;
          }),
          (a.n = function (e) {
              var r =
              e &amp;&amp; e.__esModule
                  ? function () {
                      return e.default;
                  }
                  : function () {
                      return e;
                  };
              return a.d(r, &quot;a&quot;, r), r;
          }),
          (a.o = function (e, r) {
              return Object.prototype.hasOwnProperty.call(e, r);
          }),
          (a.p = &quot;/&quot;);
          var f = (this[&quot;webpackJsonp@saberhq/saber-interface&quot;] =
              this[&quot;webpackJsonp@saberhq/saber-interface&quot;] || []),
          i = f.push.bind(f);
          (f.push = r), (f = f.slice());
          for (var l = 0; l &lt; f.length; l++) r(f[l]);
          var c = i;
          t();
      })([]);
      &lt;/script&gt;
      &lt;script src=&quot;/static/assets/js/2.40df4ba6.chunk.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/static/assets/js/main.cc5b37d9.chunk.js&quot;&gt;&lt;/script&gt;
      &lt;script
      defer
      src=&quot;https://static.cloudflareinsights.com/beacon.min.js&quot;
      data-cf-beacon='{&quot;rayId&quot;:&quot;69a4e8e24ec32e52&quot;,&quot;token&quot;:&quot;42629c83ba6b4869b3a25113283e7fc0&quot;,&quot;version&quot;:&quot;2021.9.0&quot;,&quot;si&quot;:100}'
      &gt;&lt;/script&gt;
  </code></pre>