Installation

npm i crosstalk-comments-livechat-svelte

Usage

The following components are available for Svelte:

• <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 Svelte 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 | string | | className | CSS Classes (margin, width etc) | 🟡 Optional | string |

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

<CrossTalkComments wp="YOUR_WEB_PROPERTY_NAME" pageID="UNIQUE_PAGE_ID" url="URL" style="width: 80%" />

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 | string | | 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 lang="ts">
    import { CrossTalkVideoPlayer } from "crosstalk-comments-livechat-svelte";
</script>

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

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 lang="ts">
    import { CrossTalkComments } from 'crosstalk-comments-livechat-svelte';
</script>

<!--Your other content before comments-->
<CrossTalkComments wp="crosstalkDemo" pageID="home" theme="dark" style="min-width: 800px" />
<!--Your other content after comments-->

Bare-Minimum Video Player with Live Chat Sample Code

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

<!--Your other content before video player-->
<CrossTalkVideoPlayer pageID="livetv" wp="crosstalkDemo" theme="dark" ytvid="miVz9nsMYEw" style="width: 1000px" className="mx-auto" />
<!--Your other content after video player-->