Installation

npm i crosstalk-comments-livechat-react

Usage

The following components are available for React:

• <CrossTalkComments> - see live demo at CrossTalk Comments
• <CrossTalkVideoPlayer> - see live demo at CrossTalk 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.

Sample Code on GitHub

You can access the working sample code using React and TypeScript on here -> GitHub

Comments

Use the <CrossTalkComments> component to add comments to your webpage. Read more at CrossTalk Comments Documentation. PS: Ensure either pageID or URL is provided.

Props for <CrossTalkComments>

| Prop Name | Prop Info | Required or not | Type | |-------------|----------------------------------------|-----------------|-----------------------| | wp | Web Property name | ✅ Required | string | | url | Page URL | 🟡 Optional | string | | pageID | Unique PageID | 🟡 Optional | string | | theme | Light or Dark theme | 🟡 Optional | string | | reactions | Whether to show Reaction Images or not | 🟡 Optional | boolean | | style | CSS Styles (margin, width etc) | 🟡 Optional | React.CSSProperties | | className | CSS Classes (margin, width etc) | 🟡 Optional | string |

<script setup lang="ts">
import { CrossTalkComments } from "crosstalk-comments-livechat-react";
</script>

<template>
    <CrossTalkComments wp="YOUR_WEB_PROPERTY_NAME" pageID="UNIQUE_PAGE_ID" url="URL" style={{width:'800px'}} />
</template>

Video Player with Live Chat

Use the <CrossTalkVideoPlayer> component to add live chat with video to your webpage. Use either pageID or URL is provided. If neither are given, an automated pageID is created depending on the video source provided.

Props for <CrossTalkVideoPlayer>

| Prop Name | Prop Info | Required or not | Type | |-------------|----------------------------------------------------------|-----------------|-----------------------| | wp | Web Property name | ✅ Required | string | | url | Page URL | 🟡 Optional | string | | pageID | Unique PageID | 🟡 Optional | string | | theme | Light or Dark theme | 🟡 Optional | string | | reactions | Whether to show Reaction Images or not | 🟡 Optional | boolean | | src | Video link | 🟡 Optional | string | | srcType | MIME Type of the video. Example: application/x-mpegURL | 🟡 Optional | string | | style | CSS Styles (margin, width etc) | 🟡 Optional | React.CSSProperties | | className | CSS Classes (margin, width etc) | 🟡 Optional | string |

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

| Prop Name | Video Platform | Video ID information | |-----------|-------------------------------------|------------------------------------------| | ytvid | YouTube | Embed ID of the YouTube video | | vimeoid | Vimeo | Vimeo video ID | | vkvid | VK Video | VK video ID | | vklive | VK Video Live | @handle of the user who's currently Live | | rtvid | RuTube Video | RuTube video ID |

<script setup lang="ts">
    import { CrossTalkVideoPlayer } from "crosstalk-comments-livechat-react";
</script>

<template>
    <CrossTalkVideoPlayer pageID="UNIQUE_PAGE_ID" wp="YOUR_WEB_PROPERTY_NAME" theme="dark" ytvid="miVz9nsMYEw" style={{width:'100%'}} />
</template>

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 Comments Sample Code

<script setup lang="ts">
    import { CrossTalkComments } from 'crosstalk-comments-livechat-react';
</script>

<template>
    <CrossTalkComments wp="crosstalkDemo" pageID="home" theme="dark" style={{minWidth:'800px'}} />
</template>

Bare-Minimum Video Player with Live Chat Sample Code

<script setup lang="ts">
    import { CrossTalkVideoPlayer } from 'crosstalk-comments-livechat-react';
</script>

<template>
    <CrossTalkVideoPlayer pageID="livetv" wp="crosstalkDemo" theme="dark" ytvid="miVz9nsMYEw" style={{width:'1600px'}} className="mx-auto" />
</template>