Articles → MICROSOFT AZURE → Integrate Azure Bot On The Web Page

Integrate Azure Bot On The Web Page






Steps




  1. Click on the "Channels" option within the "Bot Management".
    2. Picture showing the Channels submenu in the Bot Management menu

    Click to Enlarge

  2. A page will appear where you can select different channels like web page, Facebook etc.
  3. Click on the link "Get bot embed codes".
    4. Picture showing the Get bot embed codes link in the connect to channels screen

    Click to Enlarge

  4. A popup window will appear. In the popup window, click on the link "Click here to open the Web Chat configuration page".
    5. Picture showing the Click here to open the Web Chat configuration page link

    Click to Enlarge

  5. A page will appear, where you can see the secret key and iFrame embedded code.
    6. Picture showing the secret key and html embed code for chat bot

    Click to Enlarge

  6. In the IFrame code, replace the placeholder "YOUR_SECRET_HERE" with the actual secret key.
  7. Finally, add the iFrame code in the HTML page.
    8. <html>
	<body>
		<iframe src='https://webchat.botframework.com/embed/KG777?s=iSRt_dyQZy4.pdMvSZYWuwW5GSXjRlnHDcl3BX9hQIv_uvp9gKJX610' style='min-width: 400px; width: 100%; min-height: 500px;'></iframe>
	</body>
</html>



    Output


    Picture showing the output of integrating chat bot on the HTML page

    Click to Enlarge



Posted By  -  Karan Gupta
 
Posted On  -  Tuesday, November 3, 2020

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250