New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Travel

The Telerik Chat for ASP.NET AJAX component allows for integration with any bot framework, due to its simplicity, flexible API and customizable templates.

This demo demonstrates how the widget can be connected to a chat bot created in Microsoft's Bot Framework, using the DirectLineJS client library. The sample shows off out of the box features of the Chat component, such as the hero cards and suggested actions, as well as the ability to define custom components, which let you use javascript to render any content. In this particular case we use the AdaptiveCards client API to render the adaptive cards returned by the service.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <!-- Load Bot Framework Client API -->
    <script src="https://unpkg.com/botframework-directlinejs@0.11.5/dist/directline.js""></script>

    <!-- Load Adaptive Cards Client API -->
    <script src="https://unpkg.com/adaptivecards/dist/adaptivecards.js"></script>

    <div class="demo-container size-narrow" style="text-align: center">
        <telerik:RadChat runat="server" ID="RadChat1" Skin="Default">
            <ClientEvents OnPost="onPost" OnLoad="onLoad" />
            <UserSettings Name="John" />
        </telerik:RadChat>
    </div>
    <script src="scripts.js"></script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance