0.87.7 • Published 4 days ago

@visit-x/vxmessenger v0.87.7

Weekly downloads
863
License
proprietary
Repository
-
Last release
4 days ago

VXMESSENGER

This project is about providing messaging and video interactions for the customers of VISIT-X, the german leading Live Sex Cams & Sexchat Community.

Getting Started

Use via CDN

To connect the messenger, you need to use a link to the latest version (js, css) or a specific one:

https://vxmessenger.visit-x.net/releases/{version}/styles.css
https://vxmessenger.visit-x.net/releases/{version}/vxmessenger.min.js
{version} - version number, for example 0.0.1

For example

<link href="https://vxmessenger.visit-x.net/releases/latest/styles.css" rel="stylesheet" type="text/css" />
<script src="https://vxmessenger.visit-x.net/releases/latest/vxmessenger.min.js"></script>

Use via NPM

Install

npm i @visit-x/vxmessenger

or

yarn add @visit-x/vxmessenger

Typescript

For platforms willing to integrate VXMessenger, but which were also developed with TypeScript, tsconfig.json file should contain the following settings:

{
	"compilerOptions": {
		"skipLibCheck": true
	}
}

The reason for it is strongly related to some of our dependencies which are having troubles with their exposed type definitions.

Properties

  • id?: string - unique identification for the configured instance of messenger.

  • language: string - case insensitive (en, de, es, EN, DE, ES). This value is mandatory.

    Note: Please note that when obtaining "clientId" + "server" pair (in case one wants to start the messenger this way), the same language should be passed to the appropriate service. Otherwise, some of the messages we are getting ( and displaying) from the vchat-core will come in default language (en), producing an unpleasant mix.

  • initialVideoChatType?: VideoChatType - if the parent platform sets this value, the newly-opened messenger will start directly in the given active stream. This feature is independent to clientId, as it can be used with both clientId or webtoken. This property can be used when the client clicks on a "Start voyeur" button from the parent platform and the messenger will start with initialVideoChatType with "VOYEUR_CHAT". If no value is set, the messenger will start in its minified state, without any stream.

  • theme?: Partial<Theme> - if this value is set, the parent platform can completely configure messenger's appearance to the client. It contains information about the font (type, dimensions), the dimensions for certain elements and all the colors used in the messenger. Each color property is a string and expects the color in hexa value. If no value is set for colors or dimensions, the fallback theme will be the design from visit-x.

  • preferenceStore?: PreferenceStore - this property represents the custom implementation for handling preferences of the VXMessenger. This property is optional, if no property is passed to VXMessenger the default implementation will apply.

  • connection: ConnectionWithToken | ConnectionWithChat - this property represents the data that initiates the messenger's workflow - webtoken type of connection or clientId and server type. The first type of connection ( ConnectionWithToken) will contain the webtoken, userKey and partner's information (key and id) and will use the vxcontrol-client-lib as main API. The second type of connection (ConnectionWithChat) will contain the clientId and server and won't use the vxcontrol-client-lib, only the vchat-core. This second type of connection is going to be used only when the messenger must start in an active stream, therefore, the initialVideoChatType property should have a value set.

  • hasGiftsSectionOpened: boolean | GiftCategory - to start messenger with opened gift section set this value to true. To open any gifts tab assign some special to this value (for example, GiftCategory.LOVE). GiftCategory - is enum and exported directly from messenger.

  • features?: Features - contains all the toggleable features of the messenger, in order to ensure flexibility. All properties are of type boolean and if the value is true, that implies that the functionality is going to be present in the messenger. Our toggleable features are:

    • hasFavorite?: boolean - if the favorite icon (near model's name) is rendered. (default true)
    • hasGifts?: boolean - if it has the ability of sending gifts. (default true)
    • hasTips?: boolean - if it has the ability of sending tips and the anonymous tip functionality when starting a voyeur chat session. (default false)
    • hasEmoticons?: boolean - if it has the ability of sending emoticons. (default true)
    • hasToyControl?: boolean - if it has the toy control feature activated. (default true)
    • hasImageUpload?: boolean - if it has the ability of uploading images. (default true)
    • hasGroupChatIndicator?: boolean - if it renders the number of participants in a group chat(default true)
    • hasContactNote?: boolean - if the contact note (near model's name) is rendered. (default true)
    • hasExitPopups?: boolean - if on any type of exit (for instance when closing the videochat) would use messenger's implemented popups to inform the client. Some content partners would desire using their own popups/behaviors to be executed. (default true)
    • hasModelProfilePicture?: boolean - model's profile picture is rendered. (default true)
    • hasModelName?: boolean - model's name is rendered. (default true)
    • hasModelMotto?: boolean - model's motto is rendered. (default true)
    • hasCam2Cam?: boolean - when having an active stream, cam2cam button is rendered. (default true)
    • hasVoyeur?: boolean - if voyeur button is rendered. (default true)
    • hasPrivateChat?: boolean - when having an active stream, private chat button is rendered. (default true)
    • hasCloseButton?: boolean - the X button in the top right corner is rendered. (default true)
    • hasSendMessageButton?: boolean - on true, the button for sending messages to the model will be rendered. ( default true)
    • hasFullscreen?: boolean - when having an active stream, the client has the fullscreen option. (default true)
    • hasHistoryMessages?: boolean - when opening the messenger, in the chatbox we will render the past conversations between the client and the model. (default true)
    • hasHistorySectionsOpened?: boolean - when opening the chatbox, the message section are already opened. ( default true)
    • hasPreloaderPaymentText?: boolean - if this flag is true, there will be no text displayed above loading pre-loader. (default true)
    • hasBehaviorOnClickOutside?: boolean - if this flag is true, the messenger (in text mode) will close when clicking outside. (default true)
    • hasMessagesGrouped?: boolean - the history messages are grouped together based on their previous livechat sessions. (default true)
    • hasMessagesGrouped2?: boolean - adds a message about the end of the previous livechat session. (default true)
    • isMessageTypeHeader?: boolean - text chat messenger has a customized header, to be applied on visit-x integration only. (default false)
    • hasAudioMessages?: boolean - the messenger will have the functionality of sending audio messages to the model. ( default false)
    • hasGroupChatClientName?: boolean - in a group chat session, a message sent by the client will contain its own name/alias. (default false)
    • hasFullscreenLayoutOnLandscape?: boolean - when the stream starts and the container has landscape sizes, the messenger will be using the fullscreen layout. (default false)
    • hasProductionDebugEnabled?: boolean - we will have access to production debug information in order to solve live errors more efficiently. ( default false)
    • showCensoredContent?: boolean - if it has the ability to view censored content. (default true)
  • options?: Options - contains very specific configurable properties when desiring a certain behavior for the messenger.

    • updateBrowserLink?: string - if this value is set, the parent platform can personalize the message for Cam2Cam button when is used on Internet Explorer. When the messenger is rendered on Internet Explorer, the client can't use the Cam2Cam feature, therefore the button is disabled with some information about this issue. Part of this information is the update browser link, which can be set through this property.

    • analyticsKey?: string - represents your Google Analytics key and if this value is set, you will be able to visualize the default trackers implemented in our library.

    • preloader?: string - represents image's CDN address that is going to be used as a pre-loader for starting a stream. This property is used for branding the messenger for a content partner. If no value is set, the fallback preloader is going to be a three-dots animation.

    • tip?: ITipOption - content partners starting a chat-based video session have the tipping feature active, but in order for it to work, some information are needed from the mother platform: amount of a tip, associated currency and an image associated to the tip (defaults some green bank-notes). That info will be rendered on the confirmation tip pop-up.

    • switchToPortraitWidth?: number - max width in pixels after which the messenger is rendered in landscape mode.

    • initialVideochatVolume?: number - when the stream will start, the initial volume will be set by this property. The value must be any number from 0 to 1. If the value is set on 0, the stream will start muted. If no value is set, the stream will start normally.

    • censoredContentImage?: string - represents image's CDN address that is going to be used as the cover for censored content. If no value is set, the default image is going to be shown.

    • useInjectableHlsPlayer?: boolean - allows integrators to provide their own implementation of the HLS player. If not provided, will call a onClickVideo hook with (hls: string, poster: string, isTranscoding?: boolean) arguments (this is default behavior). When set to true, you can customize the inlined player by providing custom implementation for component. See hooks.renderHlsPlayer for custom implementation.

  • hooks?: Hooks - functions, in which the parent platform can implement a behavior on certain events. They represent a way of communication between the messenger and the parent platform. All the functions are nullable.

    • onClickProfile? - will execute the logic inside the function when client clicks on model's name or profile picture;

    • onClickImage? - will execute this logic when user click an image, instead of simply opening the image in the default viewer; useful for platforms willing to have their own image viewers

    • onClickVideo? - will be called when user is clicking a video message; if not specified, video won't play, messenger has no player embedded inside. Is not called when options.useInjectableHlsPlayer is set to true.

    • onExit? - will execute the logic inside the function when the messenger will close, irrespective to its cause. It will contain an exitCode in order to reflect the reason for which the messenger has been closed;

    • onRecharge? - will execute the logic inside the function if messenger's recharge mechanism is not working;

    • onVideoChatAction? - will execute the logic inside the function when any type of stream changes its type from active to inactive or from inactive to active. It will return a flag if the video is open and, optionally, a value for chatId when closing the stream.

    • onExitPopupAction? - will execute the logic inside the function when exit pop-ups (if having this feature set on) are displayed or hidden;

    • onAgeVerification? - will execute the logic inside the function when messenger would need to verify the age of the client. The messenger as an application does not know how to apply age verification, so it's going to rely on the parent platform;

    • onModelStatusChange? - will execute the logic inside the function when the model goes from online to offline or from offline to online. Any change in model's online status will trigger this function;

    • onSupportedVideoChatTypes? - will execute the logic inside the function when the messenger is opened. It will return the array of possible streams with the model. For instance, ["LIVECHAT", "LIVE_PREVIEW", "VOYEUR_CHAT"] if all the streams are possible.

    • onFailedChatConfig? - will execute the logic inside the function when the messenger has been started with the clientId and server as connection, but starting the stream has failed and returned with an error. This error is going to be returned as a parameter;

    • onFailedWebToken? - will execute the logic inside the function when the messenger finds the provided web token not usable (or not usable anymore - e.g. token has expired);

    • onBecomeVIP? - functionality for setting the current client as a VIP member to your platform.

    • onNewIncomingMessage? - will execute the logic inside the function when new message from the model was received.

    • onClickLobbyChat - will be executed when the user clicks on "Live Show"

    • renderHlsPlayer? - can be used to render custom HLS player inlined in the messenger. Has to return a React component or plain HTML element. If not provided, messenger will fallback to HTML5 <video> element, which does not have a 100% support for HLS within various browsers.

Interfaces and enumerators for messenger's properties

ConnectionWithToken

interface ConnectionWithToken {
	webToken: string;
	partner: Partner;
	userKey?: string;
}

VideoChatType

enum VideoChatType {
	LIVECHAT = 'LIVECHAT',
	FREECHAT = 'FREECHAT',
	LIVE_PREVIEW = 'LIVE_PREVIEW',
	VOYEUR_CHAT = 'VOYEUR_CHAT',
	VOYEUR_PRIVATE_CHAT = 'VOYEUR_PRIVATE_CHAT',
	PRIVATE_CHAT = 'PRIVATE_CHAT',
	CAM2CAM = 'CAM2CAM',
	NO_DOWNSTREAM = 'NO_DOWNSTREAM',
	GROUP_CHAT = 'GROUP_CHAT',
	CONTENT_PARTNERS_CHAT = 'CONTENT_PARTNERS_CHAT',
	VIDEO_CALL = 'VIDEO_CALL',
}

ConnectionWithChat

interface ConnectionWithChat {
	clientId: string;
	server: string;
}

Partner

interface Partner {
	id: string;
	key: string;
}

GiftCategory

enum GiftCategory {
	INVENTORY = -1,
	LOVE = 1,
	WINTER = 2,
	SUMMER = 3,
	FETISH = 4,
	BUNDLES = Infinity,
}

Features

interface Features {
	hasFavorite: boolean;
	hasGifts: boolean;
	hasTips: boolean;
	hasEmoticons: boolean;
	hasToyControl: boolean;
	hasImageUpload: boolean;
	hasGroupChatIndicator: boolean;
	hasSendMessageButton: boolean;
	hasContactNote: boolean;
	hasExitPopups: boolean;
	hasModelProfilePicture: boolean;
	hasModelName: boolean;
	hasModelMotto: boolean;
	hasCam2Cam: boolean;
	hasVoyeur: boolean;
	hasPrivateChat: boolean;
	hasCloseButton: boolean;
	hasFullscreen: boolean;
	hasHistorySectionsOpened: boolean;
	hasHistoryMessages: boolean;
	hasMessagesGrouped: boolean;
	hasPreloaderPaymentText: boolean;
	hasBehaviorOnClickOutside: boolean;
	isMessageTypeHeader?: boolean;
	hasAudioMessages?: boolean;
	hasGroupChatClientName?: boolean;
	hasFullscreenLayoutOnLandscape?: boolean;
	hasProductionDebugEnabled?: boolean;
	showCensoredContent?: boolean;
}

ImperativeHandlers

interface ImperativeHandlers {
	toggleFullscreen: (event: SyntheticEvent) => void;
}

PreferenceStore

interface PreferenceStore {
	getPreference: (preferenceName: PreferenceName) => boolean | number | undefined;
	setPreference: (preferenceName: PreferenceName, value: boolean | number, instanceId?: string) => void;
}

Options

interface Options {
	tip?: ITipOption;
	preloader?: string;
	analyticsKey?: string;
	updateBrowserLink?: string;
	switchToPortraitWidth?: number;
	initialVideochatVolume?: number;
	censoredContentImage?: string;
	useInjectableHlsPlayer?: boolean;
}

Theme

interface Theme {
	name: string;
	typography: {
		fontFamily: string;
		secondaryFontFamily: string;
		weight: {
			thin: number;
			light: number;
			regular: number;
			medium: number;
			lightBold: number;
			bold: number;
		};
	};

	layout: {
		textMode: {
			minWidth: number;
			minHeight: number;
		};
		messageSection: {
			responsiveBreakpointWidth: number;
			scrollBar: number;
		};
	};

	colors: {
		overlay: string;
		baseButtonIcon: string;
		recordingIcon: string;
		audioPlayerBackground: string;
		audioPlayerTime: string;
		audioPlayerPlay: string;
		audioPlayerKnob: string;
		audioPlayerRail: string;
		audioPlayerControlDisabled: string;
		fontSwitcherIcon: string;
		sendMessageButton: string;
		cancelRecordingHover: string;
		cam2CamBackgroundColor: string;
		cam2CamDisabledColor: string;
		cam2CamHoverColor: string;
		messengerWrapper: string;
		messengerClose: string;
		messengerSettings: string;
		messengerLoader: string;
		messageEditorBackgroundColor: string;
		messageEditorPlaceholderColor: string;
		messageEditorTextColor: string;
		mentionBackground: string;
		mentionHeaderText: string;
		mentionHeaderBackground: string;
		mentionHeaderBorderColor: string;
		mentionSectionBackground: string;
		paidMessageBuyButtonText: string;
		paidMessageBuyButtonBackground: string;
		paidMessageBuyButtonDisabledBackground: string;
		paidMessageLabelText: string;
		videoMessageTimeText: string;
		headerText: string;
		headerShadow: string;
		typing: {
			text: string;
			background: string;
			shadow: string;
		};

		typingBackground: string;

		settings: {
			text: string;
			textDisabled: string;
			shadow: string;
			divider: string;
			delete: string;
			selectedCameraIcon: string;
			ban: string;
			overlay: string;
		};

		groupChat: {
			modelInfoText: string;
			pictureBorder: string;

			userMessageText: string;
			userMessageBackground: string;
			usernameColorSet: string[];

			modelMessageText: string;
			modelMessageBackground: string;
			modelMessageUsername: string;

			clientMessageText: string;
			clientMessageBackground: string;
			clientName: string;

			participants: {
				bgColor: string;
				textColor: string;
			};
		};

		vipLivePreviewButton: {
			background: string;
			text: string;
		};

		chatBoxContainer: string;
		imageUrlContent: string;
		groupColor: string;
		groupTextColor: string;
		profileLink: string;
		profileLinkHover: string;
		profileMotto: string;
		messengerButtonInvertedBackground: string;
		messengerButtonHover: string;
		messengerButtonInvertedText: string;
		windowBackground: string;
		windowItemsShadow: string;
		windowPaginatorBackground: string;
		clientMessageBackground: string;
		fullscreenSystemMessageBackground: string;
		fullscreenSystemMessageText: string;
		modelMessageBackground: string;
		messageText: string;
		messageTextDeleted: string;
		messageTimeAgo: string;
		messageReadIndicator: string;
		messageUploadOverlay: string;
		videoChatBackground: string;
		videoChatControlsBackground: string;
		videoChatControlsBackgroundHover: string;
		videoChatControlsText: string;
		privateTicketShow: {
			background: string;
			divider: string;
		};

		onlineBulletColor: string;
		offlineBulletColor: string;

		purchaseButton: {
			defaultBackground: string;
			paidBackground: string;
			disabledBackground: string;

			defaultText: string;
			paidText: string;
		};

		selectedButton: {
			defaultBackground: string;
			defaultBackgroundHover: string;

			blackBackground: string;
			blackBackgroundHover: string;

			defaultDropDownBackground: string;
			blueBackgroundHover: string;
			greyBackgroundHover: string;

			text: string;
			clickHighlight: string;
		};

		videoCallButton: {
			background: string;
			text: string;
		};
		
		closeButton: {
			primaryColor: string;
			secondaryColor: string;
		};

		initiallyMutedButtonBackground: string;
		initiallyMutedToolTipContentText: string;

		checkedStrokeColor: string;
		checkedFillColor: string;

		dropDownContentBgColor: string;

		timerFillColor: string;
		timerUnfillColor: string;
		timerBgColor: string;
		timerTextColor: string;

		livePreviewTimer: {
			fillColor: string;
			unfillColor: string;
			bgColor: string;
			textColor: string;
		};

		editor: {
			background: string;
			text: string;
			placeholder: string;
		};

		giftPageTitle: string;
		giftPageText: string;
		giftOldPrice: string;

		avsCam2CamPopup: {
			backgroundColor: string;
			smallTextColor: string;
			mainTextColor: string;
			button: {
				standard: string;
				onHover: string;
				textColor: string;
			};
		};

		dialogModal: {
			background: string;
			titleText: string;
			text: string;
			agreeButton: {
				standard: string;
				hover: string;
				text: string;
			};
			cancelButton: {
				standard: string;
				border: string;
				hover: string;
				text: string;
			};
		};

		preChatPopup: {
			backgroundColor: string;
			textColor: string;
		};

		actionResponse: {
			warningColor: string;
			errorColor: string;
			successfulColor: string;
			neutralColor: string;
		};

		userPrompt: {
			tipColor: string;
			tipPriceColor: string;
			tipButtonColor: string;
			tipButtonBackgroundColor: string;
			tipButtonBackgroundHoverColor: string;
		};
		modal: {
			closeButtonColor: string;
			backgroundColor: string;
		};

		toySection: {
			primaryColor: string;
			secondaryColor: string;
			lock: string;
			text: string;
			hoverTooltipText: string;
			headerSectionBackground: string;
			headerSectionBorderColor: string;
			optionText: string;
			headerSectionLink: string;
			inactiveToyMessageText: string;
		};

		informationDialog: {
			title: string;
		};

		messageTypeHeader: {
			modelTitle: string;
			title: string;
			subtitle: string;
		};

		expirationInfo: {
			background: string;
			title: string;
		};

		cameraSelection: {
			option: {
				defaultColor: string;
				selectedColor: string;
			};
		};

		mobileMenuWrapper: {
			backgroundColor: string;
			borderColor: string;
			itemBorderColor: string;
			lastItemBorderColor: string;
			itemWrapperColor: string;
		};

		noteButton: string;
		favoriteButton: string;
		giftsCloseButton: string;
		ban: {
			text: string;
			timer: string;
			divider: string;
		};

		messageMenu: {
			background: string;
			delete: string;
			shadow: string;
			longPressOverlay: string;
			longPressBackground: string;
		};
		reactions: {
			background: string;
			hoveredBackground: string;
			deleteText: string;
			primaryText: string;
		};
		contextMenu: {
			background: string;
		};
		progress: {
			background: string;
			bar: string;
		};
		uploadProgress: {
			circle: string;
			text: string;
			background: string;
		};
		scrollBar: {
			normal: string;
			hovered: string;
		};
		alert: {
			error: string;
			success: string;
			text: string;
		};
		dialogModalMobile: {
			background: string;
			shadow: string;
		};
		headerMobile: {
			primary: string;
			textShadow: string;
		};
		systemMobile: {
			primary: string;
			background: string;
			textShadow: string;
		};
		userMessagesMobile: {
			primary: string;
			textShadow: string;
			price: string;
		};
		chatBox: {
			primary: string;
			icon: string;
			unreadMessages: string;
			blurGradient: string;
			scrollBar: string;
		};
		dotsLoader: {
			primary: string;
			secondary: string;
		};
		userAvatar: {
			background: string;
			icon: string;
		};
		notifications: {
			background: {
				default: string;
				success: string;
				failure: string;
				error: string;
				recharge: string;
			};
			text: string;
		};
	};
}

Hooks

interface Hooks {
	onClickProfile?: () => void;
	onClickImage?: (src: string, srcSet: string) => void;
	onClickVideo?: (hlsUrl: string, posterUrl: string) => void;
	onExit: (code?: ExitCode, message?: string, chatFlags?: string[], chatType?: EndChatType) => void;
	onRecharge?: () => void;
	onVideoChatAction?: (isVideoChatOpen: boolean, chatId?: string) => void;
	onExitPopupAction?: (isExitPopupOpen: boolean, code?: ExitCode, message?: string, chatType?: EndChatType) => void;
	onAgeVerification?: () => void;
	onModelStatusChange?: (isOnline: boolean) => void;
	onSupportedVideoChatTypes?: (videoChatTypes: VideoChatType[]) => void;
	onFailedChatConfig?: (error: any) => void;
	onFailedWebToken?: (error?: any) => void;
	onBecomeVIP?: () => void;
	onClickLobbyChat?: () => void;
	renderHlsPlayer?: (props: {hls?: string; poster?: string; isTranscoding?: boolean}) => React.ReactNode;
}

Methods exposed by VXMessenger

  • closeMessenger - will clean up the messenger: close opened sockets and reset the Redux store. Note: Before sending a new clientId and server, we advise calling the "closeMessenger" function, otherwise the messenger won't react to the newly received values. The correct steps would be:
    1. Send initial clientId & server to the vxmessenger
    2. Call the closeMessenger function for a clean new state of the messenger, when you want to send new connection values
    3. Send the new clientId & server to the vxmessenger

Integration

For displaying the messenger on iOS devices, an integration tip is:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0" />

Simple React Example

import React from 'react';

import VXMessenger, {Language, VideoChatType} from '@visit-x/vxmessenger';

import './App.css';

const props = {
	connection: {
		clientId: '00000000000000000000000000000000',
		server: 'ds.farm1.campoints.net',
	},
	language: Language.EN,
	initialVideoChatType: VideoChatType.LIVECHAT,
	features: {
		hasModelProfilePicture: false,
		hasModelMotto: false,
		hasModelName: false,
		hasCam2Cam: true,
		hasPrivateChat: false,
		hasExitPopups: false,
		hasContactNote: false,
		hasFavorite: false,
		hasFullscreen: false,
		hasCloseButton: false,
	},
	hooks: {
		onClickProfile: function () {
			console.log('Clicked on profile');
		},
		onExit: function (exitCode, exitMessage, chatFlags) {
			console.log('Chat exited', {exitCode, exitMessage, chatFlags});
		},
		onRecharge: function () {
			console.log('onRecharge');
		},
		onVideoChatAction: function (isVideoOpen, chatId) {
			console.log('onVideoChatAction:isVideoOpen', isVideoOpen);
			console.log('onVideoChatAction:chatId', chatId);
		},
		onAgeVerification: function () {
			console.log('onAgeVerification');
		},
		onModelStatusChange: function (isOnline) {
			console.log('Model status changed to ', isOnline);
		},
		onSupportedVideoChatTypes: function (videoChatTypes) {
			console.log(videoChatTypes);
		},
		onFailedChatConfig: function (error) {
			console.log('Supplied chat conf has failed with the following reason: ', error);
		},
	},
};

function App() {
	return (
		<div className="App">
			<VXMessenger {...props} />
		</div>
	);
}

export default App;

Also, we could modify recent example to get access to fullscreen toggle:

import React, {useCallback, useRef} from 'react';

import VXMessenger, {ImperativeHandlers, Language, VideoChatType} from '@visit-x/vxmessenger';

//...

function App() {
	const vxMessengerRef = useRef<ImperativeHandlers>(null);

	return (
		<div className="App">
			<VXMessenger {...props} ref={vxMessengerRef} />
			<button
				onClick={useCallback((event) => {
					vxMessengerRef?.current?.toggleFullscreen(event);
				}, [])}
			>
				Toggle fullscreen mode
			</button>
		</div>
	);
}

Please pay attention to event. It is required as an argument for toggleFullscreen because user has to interact with the page or a UI element in order for this feature to work.

Simple RequireJS Example

<!DOCTYPE html>
<html lang="en">
	<meta charset="utf-8" />
	<meta content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0" name="viewport" />
	<title>VXMessenger - Simple RequireJS Example</title>
	<link
		href="https://vxmessenger.visit-x.net/releases/latest/vxmessenger.min/styles.css"
		rel="stylesheet"
		type="text/css"
	/>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"
		type="application/javascript"
	></script>
	<script src="https://cdn.polyfill.io/v2/polyfill.min.js" type="application/javascript"></script>
	<script type="application/javascript">
		requirejs.config({
			baseUrl: '.',
			paths: {
				react: 'https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min',
				'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min',
				vxmessenger: 'https://vxmessenger.visit-x.net/releases/latest/vxmessenger.min',
				hooks: 'scripts/hooks',
				features: 'scripts/features',
				options: 'scripts/options',
				theme: 'scripts/theme',
			},
		});
		requirejs(['react', 'hooks', 'features', 'options', 'theme'], function (React, hooks, features, options, theme) {
			requirejs(['react-dom', 'vxmessenger'], function (ReactDom, VXMessenger) {
				const props = {
					connection: {
						webToken: '00000000000000000000',
						partner: {
							id: '0000',
							key: '00000000',
						},
						userKey: '000000',
					},
					language: 'en',
					hooks: hooks,
					features: features,
					options: options,
					theme: theme,
				};

				const Messenger = React.createElement(VXMessenger.default, props, null);

				ReactDom.render(Messenger, document.getElementById('root'));
			});
		});
	</script>

	<body>
		<div id="root">Loading...</div>
	</body>
</html>

Exit Codes

If you want to configure certain behaviors on the "onExit" hook based on the incoming exit code, this information can be found inside the resources presented down below.

Tips & Tricks

  • Pressing CTRL+ALT+V (Windows) or CTRL+OPTIONS+V (Mac) will show the current VXMessenger's version for about 5 seconds; For mobile devices, seven consecutive clicks will do the job.

Built With

Libraries

Tooling

0.87.7

4 days ago

0.87.6

8 days ago

0.87.5

14 days ago

0.87.4

15 days ago

0.86.1

2 months ago

0.85.0

3 months ago

0.81.1

8 months ago

0.81.2

6 months ago

0.82.8

5 months ago

0.79.3

9 months ago

0.79.4

8 months ago

0.80.2

8 months ago

1.0.0-alpha.3

6 months ago

1.0.0-alpha.2

6 months ago

1.0.0-alpha.1

8 months ago

1.0.0-alpha.0

9 months ago

0.83.4

5 months ago

0.84.1

4 months ago

0.78.4

10 months ago

0.79.2

9 months ago

0.77.4

11 months ago

0.76.0

12 months ago

0.77.3

11 months ago

0.74.0

1 year ago

0.75.0

1 year ago

0.72.2

1 year ago

0.72.3

1 year ago

0.73.2

1 year ago

0.71.2

1 year ago

0.72.1

1 year ago

0.70.3

1 year ago

0.67.3

1 year ago

0.68.0

1 year ago

0.65.2

1 year ago

0.65.3

1 year ago

0.66.5

1 year ago

0.66.7

1 year ago

0.64.8

1 year ago

0.69.1

1 year ago

0.69.4

1 year ago

0.69.3

1 year ago

0.69.0

1 year ago

0.63.3

2 years ago

0.60.3

2 years ago

0.60.2

2 years ago

0.61.0

2 years ago

0.62.9

2 years ago

0.62.6

2 years ago

0.59.4

2 years ago

0.57.1

2 years ago

0.58.1

2 years ago

0.58.0

2 years ago

0.55.3

2 years ago

0.56.2

2 years ago

0.54.2

2 years ago

0.54.0

2 years ago

0.53.6

2 years ago

0.53.5

2 years ago

0.53.3

2 years ago

0.51.6

2 years ago

0.51.0

2 years ago

0.52.0

2 years ago

0.49.0

2 years ago

0.50.1

2 years ago

0.50.0

2 years ago

0.48.2

2 years ago

0.48.3

2 years ago

0.48.0

2 years ago

0.48.1

2 years ago

0.47.0

2 years ago

0.45.0

2 years ago

0.46.0

2 years ago

0.44.0

2 years ago

0.43.2

2 years ago

0.43.0

2 years ago

0.43.1

2 years ago

0.42.0

3 years ago

0.41.0

3 years ago

0.40.0

3 years ago

0.39.0

3 years ago

0.38.1

3 years ago

0.38.0

3 years ago

0.37.0

3 years ago

0.36.0

3 years ago

0.32.3

3 years ago

0.32.2

3 years ago

0.35.1

3 years ago

0.35.0

3 years ago

0.34.1

3 years ago

0.34.0

3 years ago

0.33.0

3 years ago

0.32.1

3 years ago

0.32.0

3 years ago

0.31.0

3 years ago

0.30.0

3 years ago

0.29.1

3 years ago

0.29.0

3 years ago

0.28.1

3 years ago

0.28.0

3 years ago

0.27.0

3 years ago

0.26.1

4 years ago

0.26.0

4 years ago

0.25.0

4 years ago

0.24.0

4 years ago

0.23.0

4 years ago

0.22.2

4 years ago

0.22.1

4 years ago

0.22.0

4 years ago

0.21.0

4 years ago

0.20.0

4 years ago

0.19.0

4 years ago

0.18.0

4 years ago

0.17.0

4 years ago

0.16.1

4 years ago

0.16.0

4 years ago

0.15.1

4 years ago

0.15.0

4 years ago

0.14.1

4 years ago

0.14.0

4 years ago

0.13.1

4 years ago

0.13.0

4 years ago

0.12.0

4 years ago

0.11.0

4 years ago

0.10.0

4 years ago

0.9.3

4 years ago

0.9.2

4 years ago

0.9.1

4 years ago

0.9.0

4 years ago

0.9.0-RC

4 years ago

0.8.1

4 years ago

0.8.0

4 years ago

0.8.0-RC

4 years ago

0.7.2

4 years ago

0.7.1

4 years ago

0.7.0

4 years ago

0.7.0-R1

4 years ago

0.7.0-RC

4 years ago

0.6.1

4 years ago

0.6.0

4 years ago

0.6.0-R2

4 years ago

0.5.5

4 years ago

0.6.0-R1

4 years ago

0.6.0-RC1

4 years ago

0.5.4

4 years ago

0.6.0-RC

4 years ago

0.6.0-rc

4 years ago

0.5.3

4 years ago

0.5.2

4 years ago

0.5.1

5 years ago

0.5.0

5 years ago

0.4.3

5 years ago

0.4.1

5 years ago

0.4.0

5 years ago

0.3.2

5 years ago

0.3.1

5 years ago

0.3.0

5 years ago

0.2.9

5 years ago

0.2.8

5 years ago

0.2.7

5 years ago

0.0.0-04ec905

5 years ago

0.0.0-682d9e3

5 years ago

0.0.0-7326a3c

5 years ago

0.2.6

5 years ago

0.2.5

5 years ago

0.2.4

5 years ago

0.2.3

5 years ago

0.2.2

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.68

5 years ago

0.1.67

5 years ago

0.1.66

5 years ago

0.1.65

5 years ago

0.1.64

5 years ago

0.1.63

5 years ago

0.1.62

5 years ago

0.1.61

5 years ago

0.1.60

5 years ago

0.1.59

5 years ago

0.1.56

5 years ago

0.1.54

5 years ago

0.1.53

5 years ago

0.1.52

5 years ago

0.1.51

5 years ago

0.1.50

5 years ago

0.1.48

5 years ago

0.1.47

5 years ago

0.1.45

5 years ago

0.1.44

5 years ago

0.1.43

5 years ago

0.1.42

5 years ago

0.1.41

5 years ago

0.1.40

5 years ago

0.1.39

5 years ago

0.1.38

5 years ago

0.1.37

5 years ago

0.1.36

5 years ago

0.1.35

5 years ago

0.1.34

5 years ago

0.1.33

5 years ago

0.1.32

5 years ago

0.1.31

5 years ago

0.1.30

5 years ago

0.1.29

5 years ago

0.1.28

5 years ago

0.1.27

5 years ago

0.1.26

5 years ago

0.1.25

5 years ago

0.1.24

5 years ago

0.1.23

5 years ago

0.1.22

5 years ago

0.1.21

5 years ago

0.1.20

5 years ago

0.1.19

5 years ago

0.1.18

5 years ago

0.1.17

5 years ago

0.1.16

5 years ago

0.1.15

5 years ago

0.1.14

5 years ago

0.1.13

5 years ago

0.1.12

5 years ago

0.1.11

5 years ago

0.1.10

5 years ago

0.1.9

6 years ago

0.1.8

6 years ago

0.1.7

6 years ago

0.1.6

6 years ago

0.1.5

6 years ago

0.1.4

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago