GuidesDiscussions

Advanced Options

Suggest Edits

📘

Etherglade is currently in Beta!

We would love it if you gave us any feedback - if the docs are unclear, you run into a bug, or something isn't working like you expect it to please e-mail [email protected] and we'll do our best to fix it ASAP :)

Etherglade on Page

Don't want your users to have to click a button to see the Etherglade UI? You can also embed Etherglade! Use https://cdn.jsdelivr.net/gh/etherglade/ethergladejs/etherglade-landing.js and pass in a div for Etherglade to fill:

<body>
  <div id="etherglade_container"></div>
  
  <script src="https://cdn.jsdelivr.net/gh/etherglade/ethergladejs/etherglade-landing.js">
  </script>
  <script>
    var example_instance = new etherglade("<APP_ID_HERE>", "<API_KEY_HERE>");
    example_instance.initiateComponent('#etherglade_container', {
        value: 100000000000000000
    });
  </script>
</body>

Changeable Value

If you want your users to be able to change the amount of ether they can send via Etherglade you can simply set changeableValue to true:

var example_instance = new etherglade("<APP_ID_HERE>", "<API_KEY_HERE>");
example_instance.initiateComponent('#etherglade_container', {
	value: 100000000000000000,
 	changeableValue: true,
});

Successful Transactions

When a user sends ether using Metamask, Ledger, or Trezor, an Ethereum transaction will be created. If you pass an onSuccess callback to the Etherglade instance, you can easily get the transaction ID:

example_instance.initiateComponent('#clickme', {
  value: 100000000000000000,
  onSuccess: function(transaction_id) {
    console.log("Success!");
    console.log(transaction_id);
  },
});

Closing the Etherglade UI

Similarly, you can pass an onClose callback to the Etherglade instance to find out when a user has closed the Etherglade UI (regardless of if the user successfully sent ether or not):

example_instance.initiateComponent('#clickme', {
  value: 100000000000000000,
  onClose: function() {
    console.log("The user closed the Etherglade UI!");
  },
});

Updated about 6 years ago