Client

The VeltClient class contains the following fields:

​

1. init()

Initialize the Velt client. Call only once.

Signature

export declare async function init(apiKey: string, config: Config): Promise<Velt>;

Params

apiKey: string - Your API key to make authenticated calls to Velt Servers and track SDK usage.

config?: Config

Returns

Promise<Velt>

​

identify()

Tell us who the currently logged in user is. Call whenever the user signs in or signs up.

Signature

export declare function identify(user: User): User;

Params

user: User

Returns

User

​

updateUser()

Update the attributes for the currently logged in user. Use this whenever the user is updated (eg: upgrades, or has updated contact list etc.) but ensure that the userId is the same. If you pass a different userId here than the one you provided in the init() method, we will reinitialize the SDK with the new user.

Signature

export declare function updateUser(user: User): void;

Params

user: User

Returns

void

​

setDocumentId()

Tell us the unique ID of the current document on which you want to enable collaboration.

Signature

export declare function setDocumentId(documentId: string): void;

Params

documentId: string

Returns

void

​

setLocation()

Use this to tell us the more specific location the user is in your app. This represents a location inside the main document that you set initially using setDocumentId() . This could represent your app’s pages, sections, versions, frames (in video editor), data points on maps/charts etc.

You can pass a custom key value paired object to set the location. This means that this object can represent one or all of these dimensions at once: pages, sections, versions, frames (in video editor), data points on maps/charts etc. Example:

{
  'page': 'mainPage',
  'version': 'v1.2',
  'videoFrame': '120'
  // You can keep adding more field to make the location very specific.
  // The field names can be anything.
}

A location is always under a document in hierarchy. Once you set this, all Velt features will now be attributed to this specific location under the document. In a way all Velt data will be stored in a hierarcy like this: document/location.

If you want to show two users each others’ cursors or comments then you need to set the same documentId AND location for them.

Signature

export declare function setLocation(location: Location): void;

Params

location: Location

Returns

void

​

addLocation()

Provide the custom params of the current document/resource to identify sub document inside a document.

Signature

export declare function addLocation(params: Location): void;

Params

params: Location

Returns

void

​

removeLocation()

Removes the specific location. Now all Velt features will attributed at documentId level.

Signature

export declare function removeLocation(): void;

Params

none

Returns

void

​

setScrollableElementsIds()

Tell us the about the scrollable document ids to keep track on its scroll changes

Signature

export declare function setScrollableElementsIds(scrollableElementsIds: string[]): void;

Params

scrollableElementsIds: string[]

Returns

void

​

removeScrollableElementsIds()

To remove scrollable elements ids

Signature

export declare function removeScrollableElementsIds(): void;

Params

none

Returns

void

​

getPresenceElement()

Get the PresenceElement object to access the raw live presence data.

Signature

export declare function getPresenceElement(): PresenceElement;

Params

none

Returns

PresenceElement

​

getCursorElement()

Get the CursorElement Object to access the raw live cursor data. You can use this to subscribe to a realtime list of all live users with their cursor positions associated with the given document.

Signature

export declare function getCursorElement(): CursorElement;

Params

none

Returns

CursorElement

​

getCommentElement()

Get the CommentElement Object to access the raw comments data, including all historical comments associated with the given document.

Signature

export declare function getCommentElement(): CommentElement;

Params

none

Returns

CommentElement

​

getTagElement()

Get the Tag Pin Annotation Object to access the raw tag data.

Signature

export declare function getTagElement(): TagElement;

Params

none

Returns

TagElement

​

getSelectionElement()

Get the Selection Object to enable/disable the feature.

Signature

export declare function getSelectionElement(): SelectionElement;

Params

none

Returns

SelectionElement

​

getRecorderElement()

Get the Recorder element.

Signature

Params

none

Returns

RecorderElement

​

getContactElement()

Get the Contact element.

Signature

export declare function getContactElement(): ContactElement;

Params

none

Returns

ContactElement

​

getRewriterElement()

Get the Rewriter element.

Signature

export declare function getRewriterElement(): RewriterElement;

Params

none

Returns

RewriterElement

​

getHuddleElement()

Get the Huddle element.

Signature

export declare function getHuddleElement(): HuddleElement;

Params

none

Returns

HuddleElement

​

disableFeatures()

Provide a list of features to disable. Provide an empty array to enable all the features.

Signature

export declare function disableFeatures(features: string[]): void;

Params

features: string[]

Returns

void

​

setUserRoles()

To set the user roles which will be shown in invite users modal.

Signature

export declare function setUserRoles(userRoles: UserRole[]): void;

Params

userRoles: UserRole[]

Returns

void

​

setDarkMode()

To set the dark mode of Velt components.

Signature

export declare function setDarkMode(isDarkMode: boolean): void;

Params

isDarkMode: boolean

Returns

`void**

​

inviteUsers()

export declare function inviteUsers(users: DocumentUser[]): void;

To invite users to the document.

Signature

Params

users: DocumentUser[]

Returns

void

​

removeVeltContent()

To remove the velt content from the html content.

Signature

export declare function removeVeltContent(htmlContent: string): string;

Params

htmlContent: string

Returns

string