CrossTalkCommentsWinUI 1.0.4

CrossTalk Comments WinUI 3 Component Library

Embed CrossTalk Live Chat, Video Player with Live Chat and Comments into your WinUI 3 applications using CrossTalkCommentsWinUI nuget package. Add audience engagement and increase user interaction

Installation

dotnet add package CrossTalkCommentsWinUI

Usage

Add the line below to the XAML page or component where you intend to you CrossTalk widgets

xmlns:widgets="using:CrossTalkWinUILib.Widgets" 

You can rename the widgets prefix to whatever you like, do make sure to update the widget tags accordingly in the rest of your code.

You can then use the following CrossTalk widgets in your XAML code:

• <CrossTalkComments> - see live demo at CrossTalk Comments
• <CrossTalkLiveChat> - see live demo at CrossTalk Live Chat
• <CrossTalkVideoPlayer> - see live demo at CrossTalk Video Player with Live Chat

You'll need a CrossTalk account (yes, we have a forever-free plan, no credit card required), head over to CrossTalk Dashboard to access the Web Property information.

Comments

Use the <CrossTalkComments> UI Control to add comments to your page. PS: Ensure either PageID or URL is provided.

Params for <CrossTalkComments>:

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="YourSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUILibSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"
    Title="CrossTalk Comments WinUI"
    xmlns:widgets="using:CrossTalkWinUILib.Widgets">
    
    <StackPanel Orientation="Vertical">
        <TextBlock Margin="10,10,0,0" Text="CrossTalk Comments Sample" FontSize="16" FontWeight="Bold"/>
        <widgets:CrossTalkComments WP="YOUR_WEB_PROPERTY" PageID="YOUR_PAGE_ID" Theme="dark" Reactions="true" />
    </StackPanel>
</Window>

Until you make an account on CrossTalk, you can use the Web Property crosstalkDemo to test features using the samples below. CrossTalk has a forever-free plan so if you love what you see, come join us!

Bare-Minimum CrossTalk Comments XAML Sample Code

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="YourSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUILibSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"
    Title="CrossTalk Video Player WinUI"
    xmlns:widgets="using:CrossTalkWinUILib.Widgets">
    
    <StackPanel Orientation="Vertical">
        <widgets:CrossTalkComments WP="crosstalkDemo" PageID="home" Theme="light" Reactions="true" />
    </StackPanel>
</Window>

Video Player with Live Chat

Use the <CrossTalkVideoPlayer> UI Control to add Video Player with live chat to your page. You can use PageID or URL to link the video player to a specific page for Live Chat messages, if neither are provided, a unique PageID will be generated based on the video source provided.

Params for <CrossTalkVideoPlayer>:

CrossTalk Video Player also supports embedding external video platforms, below are the currently supported platforms:

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="YourSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUILibSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"
    Title="CrossTalk Video Player WinUI"
    xmlns:widgets="using:CrossTalkWinUILib.Widgets">
    
    <StackPanel Orientation="Vertical">
        <TextBlock Margin="10,10,0,0" Text="CrossTalk Video Player Sample" FontSize="16" FontWeight="Bold"/>
        <widgets:CrossTalkVideoPlayer WP="YOUR_WEB_PROPERTY" PageID="YOUR_PAGE_ID" YTID="YOUTUBE_EMBED_ID" Theme="dark" />
    </StackPanel>
</Window>

Bare-Minimum CrossTalk Video Player with Live Chat XAML Sample Code

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="YourSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUILibSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"
    Title="CrossTalk Video Player WinUI"
    xmlns:widgets="using:CrossTalkWinUILib.Widgets">
    
    <StackPanel Orientation="Vertical">
        <widgets:CrossTalkVideoPlayer WP="crosstalkDemo" YTID="dq21YV5mdHI" Theme="dark" />
    </StackPanel>
</Window>

Live Chat

Use the <CrossTalkLiveChat> UI Control to add Live Chat to your page. PS: Ensure either PageID or URL is provided.

Params for <CrossTalkLiveChat>:

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="YourSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUILibSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"
    Title="CrossTalk Live Chat WinUI"
    xmlns:widgets="using:CrossTalkWinUILib.Widgets">
    
    <StackPanel Orientation="Vertical">
        <TextBlock Margin="10,10,0,0" Text="CrossTalk Live Chat Sample" FontSize="16" FontWeight="Bold"/>
        <widgets:CrossTalkLiveChat WP="YOUR_WEB_PROPERTY" PageID="YOUR_PAGE_ID" Theme="dark" Locale="ja" />
    </StackPanel>
</Window>

Bare-Minimum CrossTalk Live Chat XAML Sample Code

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="YourSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUILibSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"
    Title="CrossTalk Live Chat WinUI"
    xmlns:widgets="using:CrossTalkWinUILib.Widgets">
    
    <StackPanel Orientation="Vertical">
        <widgets:CrossTalkLiveChat WP="crosstalkDemo" PageID="home" Theme="dark" />
    </StackPanel>
</Window>