title: I have a problem with Web 3 capability and Meta Mask In Front End
body: <p>I have designed a user interface on the web page(in <em>html/java script</em>) to display my smart contract values.
  When other users access the web page through <strong>other browsers</strong>, they will <strong>not be able</strong> to receive Web 3 services due to the lack of a digital wallet. Because they <strong>did not installed the wallet on their web Browser</strong> .How can I put Web 3 services and capabilities in my web page <strong>without the user having to install a wallet</strong>?</p>
  <p>The codes I used before are shown below :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>this.web3 = new Web3(this.provider);
   //***********
  const web3 = new Web3(new Web3.providers.HttpProvider(ethereumUrl))
    //****************
  new Web3.providers.HttpProvider('https://ropsten.infura.io/' + yourInfuraEndPointKey)
  );
  //*******************
  const web3 = new Web3(provider);
  //******
  const web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'))</code></pre>
  </div>
  </div>
  </p>
  <p>and a lot of code tested. I can't find any answer here. please one help me.
  and this is my last Web3 Connection Code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*this codes in head of web page ant totali it work*/
  /*but i want to work in browser that dont install metamask*/
  &lt;script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.36/dist/web3.min.js"&gt;&lt;/script&gt;
      
  &lt;script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.0.0-beta.36/dist/web3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/web3@latest/dist/web3.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  if (typeof window.ethereum !== 'undefined') 
              {
                  console.log('MetaMask is installed!');
              }else{
                  console.log('MetaMask not installed!');
                  alert("Please install Metamsk wallet first, then try again");
           }      
              const accounts = ethereum.request({ method: 'eth_requestAccounts' });
              const account = accounts[0];
              const showAccount = document.querySelector('.showAccount');
        
        
        
  var contractH;
  const accountsH = ethereum.request({ method: 'eth_requestAccounts' });
  const accountH = accountsH[0];
  const showAccountH = document.querySelector('.showAccount');
  web333 = new Web3(web3.currentProvider); 
  //window.web333 = new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io/&lt;APIKEY&gt;"));
  var addressH = "0x624/*My Contract Address*/4135E7a";
  var abiH =[/*My ABI*/];
  contractH = new web333.eth.Contract(abiH, addressH); 
  
  
      /*and the other code*/  
        
        
        
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>and when I Run Web Page in Other Browser I see This Error:<a href="https://i.stack.imgur.com/kQqaK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kQqaK.jpg" alt="enter image description here" /></a></p>
  <p>and I Before Check and Test detail about this pages :
  <a href="https://web3js.readthedocs.io/en/v1.2.0/web3-eth.html#getaccounts" rel="nofollow noreferrer">this page information</a></p>
  <p><a href="https://www.codemotion.com/magazine/dev-hub/blockchain-dev/web3-js-ethereum-blockchain-javascript-api/" rel="nofollow noreferrer">and this page</a></p>
  <p><a href="https://ethereum.stackexchange.com/questions/54871/how-to-use-web3-js-library-in-a-javascript-file-without-using-requireweb3">and this page</a></p>
  <p><a href="https://web3js.readthedocs.io/en/v1.2.11/web3.html" rel="nofollow noreferrer">and this page</a></p>
  <p><a href="https://www.npmjs.com/package/@walletconnect/web3-provider" rel="nofollow noreferrer">and this page</a></p>
  <p>and every pages that in Stack overflow and other sites</p>