Getting Started

The following tutorial demonstrates how you can add a simple RadChat control. The end result will be similar to Figure 1:

Figure 1: A RadChat configuration with declared client-side event handlers

chat-getting-started

  1. Add a ScriptManager control on a Web Form.

  2. Add a RadChat control on this Web Form:

    Example 1: Declaration of a RadChat control.

    <asp:ScriptManager runat="server" ID="ScriptManager1"  />
    <telerik:RadChat ID="RadChat1" runat="server">
    </telerik:RadChat>
    
  3. Set some of the messages and user settings like Placeholder, Name and IconUrl.

    Example 2: The chat now has a custom placeholder message, username and avatar

    <asp:ScriptManager runat="server" ID="ScriptManager1"  />
    <telerik:RadChat runat="server" ID="RadChat1">
        <MessagesSettings Placeholder="Type your message here..." />
        <UserSettings Name="John" IconUrl="avatar.png" />
    </telerik:RadChat>
    
  4. Press F5 to run the application. You will see the chat that is displayed in Figure 1. From this point you can start interacting with the chat.

    Example 3: Assigning the client-side event handlers:

    <asp:ScriptManager runat="server" ID="ScriptManager1"  />
    <telerik:RadChat runat="server" ID="RadChat1" Width="300px" Height="300px">
        <ClientEvents
            OnActionClick="OnActionClick"
            OnInitialize="OnInitialize"
            OnLoad="OnLoad"
            OnPost="OnPost"
            OnSendMessage="OnSendMessage"
            OnTypingEnd="OnTypingEnd"
            OnTypingStart="OnTypingStart" />
        <MessagesSettings Placeholder="Type your message here..." />
        <UserSettings Name="John" IconUrl="avatar.png" />
    </telerik:RadChat>
    
    function OnActionClick(sender, args) {    
    }
    
    function OnInitialize(sender, args) {    
    }
    
    function OnLoad(sender) {
        sender.postMessage("Hello!");
    }
    
    function OnPost(sender) {    
    }
    
    function OnSendMessage(sender, args) {    
    }
    
    function OnTypingEnd(sender, args) {    
    }
    
    function OnTypingStart(sender, args) {    
    }
    

    Once you have a working Chat control, you can use the client-side API of the chat to connect it to a Chatbot service.

See Also

In this article
Not finding the help you need? Improve this article