Installation

npm i crosstalk-comments-livechat-vue3

Usage

The following components are available for Vue 3:

• <cross-talk-comments> - see live demo at CrossTalk Comments
• <cross-talk-video-player> - 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 Vue 3 and TypeScript here -> GitHub

Comments

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

Props for <cross-talk-comments>

| 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|

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

<template>
    <cross-talk-comments wp="YOUR_WEB_PROPERTY_NAME" pageID="UNIQUE_PAGE_ID" url="URL" />
</template>

Video Player with Live Chat

Use the <cross-talk-video-player> 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 <cross-talk-video-player>

| 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 |

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-vue3";
</script>

<template>
    <cross-talk-video-player pageID="UNIQUE_PAGE_ID" wp="YOUR_WEB_PROPERTY_NAME" theme="dark" ytvid="miVz9nsMYEw" />
</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-vue3';
</script>

<template>
    <cross-talk-comments wp="crosstalkDemo" pageID="home" theme="dark" />
</template>

Bare-Minimum Video Player with Live Chat Sample Code

You can add style and classs to adapt the placement of the widgets per your requirement. Style's don't affect the widget directly!

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

<template>
    <cross-talk-video-player pageID="livetv" wp="crosstalkDemo" theme="dark" ytvid="miVz9nsMYEw" class="mx-auto" style="width: 1600px;" />
</template>