Incorporando sites externos
Agora é possível incorporar sites de terceiros em DexAppBuilder usando o componente predefinido “código”, seja como uma seção ou como parte de uma página personalizada.
Antes de tudo, vamos explicar como adicionar este componente como uma seção predefinida no DexAppBuilder:
Vá para o link a seguir (que redireciona para a gestão de aplicativos do DexAppBuilder) e conecte sua carteira clicando no botão "Connect wallet" localizado no canto superior direito da tela.
Escolha entre as conexões disponíveis. Lembre-se de que você deve conectar a carteira onde criou seu DApp para que ele apareça na seção de administração.
Nota: Será solicitado que você assine digitalmente com sua carteira para se autenticar no aplicativo. Por favor, aceite essa assinatura, ela é segura e inofensiva.
Uma vez conectado você poderá ver seus DApps na lista. Clique no menu (os três pontos à direita do seu DApp, dentro da coluna “Actions”) e clique em “Edit”.
Dentro da página de administração do seu DApp, vá para a seção "Layout" à esquerda clicando nela. Várias opções serão exibidas; clique em "Pages" para gerenciar a criação de páginas dentro do seu DApp.
Para os propósitos deste guia criaremos uma nova página chamada “Embedded” na qual colaremos o componente “Code”. Agora clique no botão azul «New page».
Agora vamos criar o título da página, lembrando que usaremos "Embedded" para o exemplo atual. Depois de terminar de digitá-lo, pressione o botão azul «Save»
Uma vez que sua página esteja criada, você a verá abaixo da página inicial, conforme mostrado na imagem 👇
Como você pode ver, agora estamos dentro da página que acabamos de criar e ela está vazia de componentes / seções. Vamos adicionar uma seção predefinida de código para incorporar o site de terceiros. Clique no botão "+ Add Section" que abrirá os componentes predefinidos que podemos usar.
Ao clicar no botão devemos procurar o componente “Code”, que está delineado em verde na imagem ilustrativa abaixo
Clicar na opção "Code" abrirá a seguinte tela na qual você deve colar o código-fonte do seu site. Usaremos um Typeform survey para este propósito.
Podemos analisar na última operação que o Typeform nos forneceu um componente <div> incorporável e outro <script> que juntos possibilitaram a invocação da pesquisa de satisfação que criamos para este fim. Agora clicamos no botão azul «Save».
style
Agora vamos colocar nossa página recém-criada no menu superior clicando na opção "Nav Menu" dentro da seção Layout.
Uma vez que pressionarmos o botão salvar retornamos à tela anterior onde podemos adicionar mais seções ou simplesmente salvar. Neste caso pressionamos o botão azul "save"
Agora vamos colocar nossa página recém-criada no menu superior clicando na opção "Navbar" dentro da seção Layout.
Aqui podemos ver todos os links que fazem parte do cabeçalho do nosso DApp. Vamos pressionar o botão "+ Add Menu"
Dentro do modal de criação de menu escolhemos o tipo (no nosso caso será page) e abaixo selecionamos o indicado, que no nosso caso é "Embedded". Pressionamos o botão azul "Save" quando terminarmos a escolha.
Uma vez que o menu apareça em nossa lista, pressionamos o botão "Save" no canto inferior direito para enviar as alterações para produção.
Clicamos no link e, como você pode ver na imagem abaixo, a pesquisa está ativa em nosso DApp.
Last updated