Embedding internal apps
Last updated
Last updated
You can also embed other DApps made with DexAppBuilder into yours. This can help you connect other projects of yours (or those of others) within your application, giving it greater diversity.
The procedure is similar to that of embedding external websites with certain differences. Next we will explain how to add a DApp [*.dexkit.app] inside yours:
Go to the following link (that redirects to DexAppBuilder's app management) and connect your wallet by clicking on the "Connect wallet" button located in the upper right corner of the screen.
Choose from the available connections. Remember that you must connect the wallet where you have created your DApp so that it appears in the administration section.
Note: You will be asked to digitally sign with your wallet to authenticate yourself in the app. Please accept this signature, it is safe and harmless.
Once connected you will be able to see your DApps in the list. Click on the menu (the three dots to the right of your DApp, within the “Actions” column) and click on “Edit”.
Once inside the administration page of your DApp, go to the "Layout" section on the left by clicking on it. Several options will be displayed, click on "Pages" to manage the creation of pages within your DApp.
For the purposes of this guide we will create a new page called “Embedded” in which we will paste the “Code” component. Now click on the «New page» blue button.
Now let's create the page title, remembering that we will use "Embedded" for the current example. Once we finished typing it we press in the blue «Save» button
As you can see, we are now inside the new page we created and it is empty. Let's add a predefined section of code to embed the third party's website. Let's click on the "+ Add Section" button which will open the predefined components that we can use.
Once we click on the button we must look for the “Code” component, which is outlined in green in the illustrative image below
Clicking on the "Code" option will open the following screen in which you must paste the source code for the DApp. The syntax will be the following:
Let's explain the code syntax:
This iframe will summon the DApp you want to show in your page. The src should be the link of the chosen DApp (on this example is https://scaleswap.dexkit.app). Then you will need to use the embed option and call the ?page inside the DApp you're about to display.
The hideLayout option marked as true will remove the header and the banner for that specific summoned (embedded) DApp.
After those options you will need to set the style for this iframe.
Once we press the save button we return to the previous screen where we can add more sections or simply save. In this case we press the blue "save" button
Now let's place our newly created page in the top menu by clicking on the "Navbar" option within the Layout section.
Here we can see all the links that are part of the header of our DApp. Let's press the "+ Add Menu" button
Within the menu creation modal we choose the type (in our case it will be page) and below we select the indicated one, which in our case is "Embedded". We press the blue "Save" button once we finish choosing.
Once the menu appears in our list, we press the "Save" button in the lower right corner to send the changes to production.
Let's click on the "Open URL" button to see the changes. You will have to wait a couple of minutes until the changes are reflected.
After a few minutes you will be able to see the new page in the top menu of your DApp, as in the image below:
We click on the link and, as you can see in the image below, the embedded DApp is live in our own DApp 🤯
We recommend using the Gated content option along with this functionality to create pages visible only to holders of a certain collection of NFTs or ERC20 tokens.
