Go1 Embedding React SDK

A React hook to embed a Go1 content view in your site. Includes two-way messaging between your site and the Go1 content view.

Installation

``sh
npm install @go1/go1-embedding-react-sdk
`

Usage

Import the hook from the library and use it in your functional components.

`tsx
import { useMemo, useCallback } from 'react';
import { ContentViewProps, useGo1ContentView } from '@go1/go1-embedding-react-sdk';

export function YourHostingComponent() {
const onGo1MessageReceived = useCallback((message) => {
console.log('Received postMessage from Go1');
console.log(message);
}, []);

const options = useMemo(() => {
return {
feature: 'ai-chat',
portalURL: 'learning-incorporated-usa.mygo1.com',
onGo1MessageReceived,
};
}, []);

const { sendMessageToGo1, ContentView } = useGo1ContentView(options);

return (



);
}
`

APIs

$3

`typescript
export type OnGo1MessageReceived = (message: Go1Message) => void;

export type SendMessageToGo1 = (message: Go1Message) => void;

export type IframesMap = { [key: string]: HTMLIFrameElement };

export interface FeatureAttributeCommon {
shouldSuppressPreview?: boolean;
shouldSuppressOpeningPlayer?: boolean;
shouldShowSelectWelcomeModal?: boolean;
shouldSuppressBookmark?: boolean;
shouldSuppressPlaylistAdministration?: boolean;
shouldSuppressShareLink?: boolean;
shouldSuppressLibrary?: boolean;
shouldSuppressPlaylist?: boolean;
shouldSuppressCopyRightFooter?: boolean;
shouldSuppressPlay?: boolean;
shouldSuppressExport?: boolean;
contentScope?: 'subscription' | 'library';
shouldSuppressEndorsement?: boolean;
}


export interface ThemeInformation {
/* Hex string, starting with a #. Example #0437F2 /
accent: string;
}

export type Go1MessageType =
| 'preview_start_content'
| 'preview_close'
| 'preview_add_content_success'
| 'preview_add_content_failure'
| 'preview_remove_content_success'
| 'preview_remove_content_failure'
| 'parent_show_preview'
| 'set_additional_embedding_data'
| 'go1_app_initialised'
| 'ott_required'
| 'search_result_selected'
| 'search_filter_toggle'
| 'pass_ott'
| 'logout',
| 'sync_content'
| 'inter_feature_navigation'
| 'side_drawer_open'
| 'side_drawer_close'
| 'swap_out_open'
| 'swap_out_close'
| 'play_content'
| 'library_content_added';

export interface Go1Message {
type: Go1MessageType;
payload?: any;
}


export interface FeatureAttributeCommon {
shouldSuppressPreview?: boolean;
shouldSuppressOpeningPlayer?: boolean;
shouldShowSelectWelcomeModal?: boolean;
shouldSuppressBookmark?: boolean;
shouldSuppressPlaylistAdministration?: boolean;
shouldSuppressShareLink?: boolean;
shouldSuppressLibrary?: boolean;
shouldSuppressPlaylist?: boolean;
shouldSuppressCopyRightFooter?: boolean;
shouldSuppressPlay?: boolean;
shouldSuppressExport?: boolean;
contentScope?: 'subscription' | 'library';
shouldSuppressEndorsement?: boolean;
}

/**
* Used to configure the ai-chat feature
*/
export interface FeatureAttributesAIChat extends FeatureAttributeCommon {
intent?: 'skill_gap' | 'improve_skills' | 'next_role' | 'aspirations';
message?: string; // The desired message to start the chat, which will be shown to the user
existingSkills?: string[]; // max items 7, any more are discarded
desiredSkills?: string[]; // max items 7, any more are discarded
desiredRole?: string; // e.g. "Senior Account Manager"
showFooter?: boolean // Whether to show/hide the footer, defaults to true
}

/**
* Used to configure the preview feature
*/
export interface FeatureAttributesPreview extends FeatureAttributeCommon {
id: number;
startWith1Player?: boolean;
showFooter?: boolean;
contentRatingType?: 'no rating' | 'five star rating' | 'like rating';
}

/**
* Used to configure the wallet feature
*/
export interface FeatureAttributesWallet extends FeatureAttributeCommon {
walletMode: 'setup' | 'main';
deepLink?: string;
oneClickBuyUrl?: string;
}

export interface FeatureAttributesLibrary extends FeatureAttributeCommon, FeatureAttributesRetirement {
libraryEmptyStateDescription?: string;
shouldShowLibraryTabs?: boolean;
}

export interface FeatureAttributesRetirement extends FeatureAttributeCommon {
shouldShowAlternativesSearchButton?: boolean;
shouldShowNotificationEmailRegisterSwitch?: boolean;
}

export interface FeatureAttributesSearch extends FeatureAttributeCommon {
searchTerm?: string; // If the embedding search feature includes a search term, the app will initialize with the pre-filled search term.
}
export interface FeatureAttributesMyPlaylists extends FeatureAttributesPreviewCommon {
playlistId?: number; // If embedding my-playlists feature with playlistId, the app will initialise with the specified playlistId page.
}

export interface FeatureAttributesMyLearning extends FeatureAttributeCommon {}

export interface FeatureAttributesProspect {
isProspectExperience?: boolean;
}

export interface FeatureAttributesGo1LearnSearch
extends FeatureAttributeCommon,
FeatureAttributesProspect {
searchTerm?: string; // If the embedding search feature includes a search term, the app will initialize with the pre-filled search term.
searchProvider?: string; // If the embedding search feature includes a search provider, the app will initialize with the pre-filled search provider.
}

export type FeatureAttributesRecommendations = Omit & {
providers?: string[]; // If the embedding recommendations feature includes a search providers, the app will initialize with the pre-filled search provider
skills?: string[]; // If the embedding recommendations feature includes a search skills, the app will initialize with the pre-filled search skills
topics?: string[]; // If the embedding recommendations feature includes a search topics, the app will initialize with the pre-filled search topics
sort?: string; // If the embedding recommendations feature includes a search sort, the app will initialize with the pre-filled search sort
}

export type FeatureAttributes =
| FeatureAttributesAIChat
| FeatureAttributesPreview
| FeatureAttributesWallet
| FeatureAttributesLibrary
| FeatureAttributesSearch
| FeatureAttributesMyPlaylists
| FeatureAttributesMyLearning
| FeatureAttributesRecommendations;

export interface AdditionalUserInfo {
jobTitle: string;
}

export type FeatureType =
| 'ai-chat'
| 'content-hub'
| 'preview'
| 'search'
| 'admin-curation';

export interface InitOptions {
/* Mandatory identifier for the embedded feature /
feature: FeatureType;
/* Optional element id to search for, and use as the parent for the Go1 content view (use either this or iframeParentElement, not both) /
iframeParentId?: string;
/* Optional element to use as the parent for the Go1 content view (use either this or iframeParentId, not both) /
iframeParentElement?: HTMLElement;
/* Optional parameters to configure the feature. See associated types for examples /
featureAttributes?: FeatureAttributes;
/* Optional Go1 portal URL, used for login purposes if no oneTimeToken is provided /
portalURL?: string;
/* Optional function that is invoked when the Go1 content view emits a message /
onGo1MessageReceived?: OnGo1MessageReceived;
/* Optional end user information that can enhance the context and provide a better experience. No PII is needed, please do not send any. /
additionalUserInfo?: AdditionalUserInfo;
/* Optional UI configuration /
themeInformation?: ThemeInformation;
/* Optional one time token that is used to pre-authorize the user without them needing to log in /
oneTimeToken?: string;
/* Optional OAuth token that is used to pre-authorize the user without them needing to log in /
accessToken?: string;
/* Optional Id that let us know which integration system users are coming from (will be required in the future)/
integrationSystemId?: string;
/* Optional Id that let us know which integration system users are coming from, if using an intermediary system to embed /
presentingIntegrationSystemId?: string;
/* Optional flag to control JWT persistence in browser storage, if false, JWT will not be stored in localStorage, sessionStorage, or cookies /
persistJWT?: boolean;
}
`

Function: useGo1ContentView

A react hook that will return

- sendMessageToGo1: A function that allows you to send a message to the Go1 content view
- ContentView: A react component to render the Go1 content view

`typescript
function useGo1ContentView(options: InitOptions): {
sendMessageToGo1: SendMessageToGo1;
ContentView: () => React.JSX.Element;
};
`

$3

`typescript
const onGo1MessageReceived = useCallback((message) => {
console.log('Received postMessage from Go1');
console.log(message);
}, []);

const options = useMemo(() => {
return {
feature: 'ai-chat',
portalURL: 'learning-incorporated-usa.mygo1.com',
featureAttributes: {
shouldSuppressShareLink: true,
},
persistJWT: false,
onGo1MessageReceived,
additionalUserInfo: {
jobTitle: 'Sales development representative',
},
themeInformation: {
accent: '#0437F2',
},
oneTimeToken: '907687a6e81a458190fe4c21f05ee689',
integrationSystemId: 'int_nI7rPykBRm0C',
};
}, []);

const { sendMessageToGo1, ContentView } = useGo1ContentView(options);

// now to render the
`

Function: sendMessageToGo1

Send a message to the Go1 content view. Useful to control the user experience when an event starts on your website and the Go1 content view needs to be aware of it (and potentially perform other actions - this is feature dependent.)

An example of its usage is below.

`typescript
function sendMessageToGo1(message: Go1Message): void;
`

$3

`typescript
const message = {
type: 'logout',
payload: {},
};
sendMessageToGo1(message);
`

Function: onGo1MessageReceived

Respond to events that have occurred in the Go1 content view. Useful to control the user experience when an event starts in the Go1 content view and your website needs to be aware of it.

$3

`typescript
const onGo1MessageReceived = (message) => {
switch (message.type) {
case 'enrolment_created': {
const { userId, courseId } = message.payload;
// perform appropriate actions for when a new enrolment is created
break;
}
case 'category_favourite_added': {
const { userId, category } = message.payload;
// perform appropriate actions for when a new category is favourited
break;
}
default:
break;
}
};
`

$3

Item has been added to the library

`typescript
{
"type": "library_content_added",
"payload": {
"id": "3510462",
"type": "lo"
}
}
``

Support