API

Your plugin method receive two parameters the script object and an instance of a GeniallyEngine.

Script

script.slide

Slide is an object representing the slide on which the script has been configured.

This object have one method for subscribe to events of transition.

on(eventName: SlideEvent, cb: () => void);

Example:

on('entered', () => {
   // your script
});

script.config

This object resolve the configuration of script. If in your configuration you have a string variable with name myvar you can access with:

script.config.myvar

If you have configure an itemRef and access to this variable in the config you have a resolved object and with this you can access and set a properties, subscribe to an events and call to methods.

  const { myItem } = script.config;

  // set properties
  myItem.opacity = 1;
  // get properties
  console.log(myItem.opacity);
  // subscribe to methods
  const removeEventListener = myItem.on('click', () => {
   myItem.opacity = 0;
  });

You may also have configured an action and want to use it when something happens in your plugin.

  const { myItem, myAction } = script.config;

  myItem.on('click', () => {
    geniallyEngine.runAction(myAction);
  });

GeniallyEngine

setInterval | clearInterval | setTimeout | clearTimeout

You should use these methods instead of the global ones, on a restricted environments these are guaranteed to work. Check out Limitations.

storage

export enum StorageScope {
  Instance = 'instance',
  Script = 'script',
  Genially = 'genially',
  Global = 'global',
}

Is a layer on top of the browser's localStorage, you can save and later consult a value. This storage have an scope that by default is the script, but we can send another scope.

This is a object with two methods:

setItem(key:string, value: string, scope = StorageScope.Script)

With this method you can save value in the storage for use later.

geniallyEngine.setItem('someKey', 'someValue'); geniallyEngine.setItem('someKey', 'someValue', 'genially');

getItem(key:string, scope = StorageScope.Script): string

Return the value of key in storage

geniallyEngine.setItem('someKey'); // return "someValue"

runAction(interactivityAction: InteractivityActionSnapshotOut, itemId?: string)

With this method you can run an interactivity, this interactivity is previous configured on editor and save in the configuration of script.

const { someAction } = script.config.someAction;
geniallyEngine.runAction(someAction);

playAudio

playAudio(audioParams: {
    playMode?: PlayAudioModeValue;
    source: string;
    loop?: boolean;
    initialTime?: number;
    endTime?: number; 
})

With this method you can play an audio by indicating a source where you have already uploaded the audio.

geniallyEngine.playAudio({
  source: "https://download.samplelib.com/mp3/sample-3s.mp3",
  loop: true,
});

Item

Any item resolved in the config have an interface to access some common properties:

opacity: number

shown: boolean //show or hide the item (display: 'none')

rotation: number

x: number

y: number

parentSlide: Slide // Slide in which the item is located

parentItem: Item | null // if the item in on group return item group

And call various common methods:

on(eventName: ItemEvent, cb: (eventParams) => void) // subscribe to item events

rotate(degress: number)

setPosition(x: number, y: number)

move(dx: number, dy: number)

---

For some item types the config return an specific object instance:

Image

source: string // image source, you can change the image with this property

Svg

colors: string | undefined sourceSvg: string

Text

text: string // you can change the text color: string fontSize: string fontFamily: string

ChartTable

data: (string | number)[][] // only get property for access to array data of chart or table setDataValue(row: number, col: number, value: string | number) // change the value of cell

Iframe

You can add an iframe element to your script and we can send a post message to this iframe, for this we can call to sendPostMessage function.

postMessage(message: unknown)

For receive the messages sended from iframe to the script you can add an event listener to this iframe element.

iframe.on('message', (message) => {});

This post message

Event types

SlideEvent

export enum SlideEvent {
  Entering = 'entering',
  Entered = 'entered',
  Exiting = 'exiting',
  Exited = 'exited',
}

Item events

export enum ItemEvent {
  Click = 'click',
  Visible = 'visible',
  Hidden = 'hidden',
  Drag = 'drag',
  DragStart = 'dragStart',
  DragEnd = 'dragEnd',
  DragEnter = 'dragEnter',
  DragLeave = 'dragLeave',
  Drop = 'drop',
  Change = 'change',
  Message = 'message',
  Focus = 'focus',
  Blur = 'blur',
}