Lovense Pattern Editor
Lovense Pattern Editor is a set of SDK tools for web-based audio/video platforms. Integration will allow you to:
- Make your audio/video interactive by enabling users to sync their Lovense toys to on-screen action or audio.
- Support FunScript, Lovense Patterns, and Lovense AI Sync (allowing toy vibrations match on-screen movement in real-time).
Both Lovense Remote and VibeMate supports sync to audio/video. Choose an app before integrating.
APPs | Pros | Cons |
---|---|---|
Lovense Remote is an app for Lovense users to control their toys. It is the essential app for Lovense users. | Lovense toy users most likely already have installed Lovense Remote. | 1. Users need to play audio/video in a separate browser and connect their toy via Lovense Remote mobile. 2. Only supports sync to video/audio which has scripts. |
VibeMate is a new browser app for viewers to watch livestream shows and videos. | 1. A single browser app that supports both connecting toys and accessing your website. 2. Supports syncing to video/audio which has scripts, as well as Lovense AI Sync. Lovense AI Sync lets viewers sync to on-screen action in real-time, offering an truly immersive user experience. VibeMate prioritizes manual scripts; if none are found, it will use AI. 3. Supports pattern creation, without you needing to further integrate. | Users need to download VibeMate separately. |
Configure the Developer Dashboard
Go to the developer dashboard and get your developer token.
⚠️Note: Your website name will be displayed to users. Please enter it carefully.
Integrate SDK
Step 1: Get ctoken
See here
Step 2: Initialization
Integrate pattern-sdk.js
into your website.
<script src="https://cdn.lovense-api.com/peditor-v2/pattern-sdk.js"></script>
Initialize the SDK.
Note: Call this method every time you open a media page or switch media.
const lovensePattern = new LovensePattern()
Sync with Lovense Toys
This is a simplified method for syncing to Lovense toys. It supports almost all websites, including MPA and SPA, and almost all possible situations:
- You can call it for creating connection with Lovense Remote or VibeMate. For example, on a list page.
- You must call it every time you open a media page or switch media.
Note: If you want more customization, click here to see the methods you will need.
Parameters | Description | Type | Required |
---|---|---|---|
ctoken | See here | string | Yes |
mediaId | The media's ID from your platform. | string | Yes |
duration | The media's total duration (in ms) | number | Yes |
videoEl | The <video> DOM element. Make sure that VideoEl is detected on the video/audio playback page when you call this method. Only after detection can the toy sync with video/audio. | object | No |
patternLink | Supports patterns from funScript and Lovense (patterns created in Lovense software). A pattern file's URL. | string | No |
patternData | The pattern data. | array | No |
btnId | The Sync Button will be displayed in this btnId. You can create a div, the btnId will be the Id of this div. | string | Yes |
syncButtonText | The default text on the button is "Sync with Lovense toy". When users click it, they will be prompted to connect to Lovense Remote. Then they can sync to video/audio. | string | No |
syncedButtonText | The default text is "Synced with Lovense toy". Users can click it to disconnect from Lovense Remote. | string | No |
isVR | This is for VR videos, this parameter is passed to display the short code pop-ups. | boolean | No |
supportedApp | 1: only allow syncing via Lovense Remote app. 2: only allow syncing with VibeMate app. 3: support both Lovense Remote and VibeMate | number | yes |
lovensePattern.sync({
ctoken: "[ctoken]",
mediaId: "[mediaId]",
// or videoId: "[mediaId]"
duration: "[duration]",
videoEl: document.querySelector("video"),
patternLink: "[pattern link]"// The funcript file download link
patternData: [
{ pos: 50, at: 1000 },
{ pos: 80, at: 2000 },
{ pos: 20, at: 3000 },
], // FunScript data
btnId: "[btnId]",
supportedApp: 3
})
lovensePattern.sync({
ctoken: "[ctoken]",
mediaId: "[mediaId]",
// or videoId: "[mediaId]"
duration: "[duration]",
videoEl: document.querySelector("video"),
patternLink: "[pattern link]"// The Lovense pattern file download link
patternData: [
{ v: 10, t: 1000 },
{ v: 20, t: 2000 },
{ v: 5, t: 3000 },
], // Lovense Pattern data
btnId: "[btnId]",
supportedApp: 3
})
Now, you've finished integrating Sync with Lovense toys. When you play a video/audio, your toys will sync to the action in it. Click here to see how it will work on your website. For the button and pop-ups which will display on your website, click here to change their layout if desired.
Create Lovense Patterns
VibeMate supports real-time pattern creation for videos, which does not require further development from you. However, if you want to support pattern creation from other browsers, you can use the following SDK to let users create Lovense patterns for audio/video files on your site's desktop version. This is optional and depends on your situation.
Workflow
Step 1: Integrate SDK
Click here to integrate the SDK.
Step 2: lovensePattern.editInit
Display the Lovense Pattern Editor panel to let users create patterns directly on your website. Currently supports one pattern per video.
Parameters | Description | Type | Required |
---|---|---|---|
ctoken | See here | string | Yes |
mediaId | The media's ID from your platform. | string | Yes |
domId | The Lovense Pattern Editor will be displayed in this domId. You can create a div, the domId will be the id of this div. | string | Yes |
videoEl | The <video> DOM element. Please make sure it has detected when you call this method. | object | Yes |
editorWidth | The width of the Lovense Pattern Editor panel, currently supported only by px , min-width: 720px | number | No |
lovensePattern.editInit({
ctoken: "[ctoken]",
mediaId: "[mediaId]",
// or videoId: "[mediaId]"
domId: "[domId]",
videoEl: document.querySelector("video"),
})