Embedding external sites

It is now possible to embed third-party websites in DexAppBuilder using the predefined “code” component, either as a section or as a part of a custom page.

First of all let's explain how to add this component as a predefined section in DexAppBuilder:

1. 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.

1. 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.

1. 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”.

1. 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.

1. 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.

1. 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

1. Once your page is created you will be see it below the home page as shown in the image 👇

1. As you can see, we are now inside the page we've just created and it is empty from components / sections. 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.

1. Once we click on the button we must look for the “Code” component, which is outlined in green in the illustrative image below

1. Clicking on the "Code" option will open the following screen in which you must paste the source code for your website. We will use a Typeform survey for this purpose.

1. We can analyze in the last operation that Typeform gave us an embeddable <div> component and another <script> one that together made possible the invocation of the satisfaction survey that we created for this purpose. Now we click on the blue «Save» button.

2. 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

1. Now let's place our newly created page in the top menu by clicking on the "Nav Menu" option within the Layout section.

1. Here we can see all the links that are part of the header of our DApp. Let's press the "+ Add Menu" button

1. 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.

1. Once the menu appears in our list, we press the "Save" button in the lower right corner to send the changes to production.

1. 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.

1. 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:

1. We click on the link and, as you can see in the image below, the survey is live in our 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.