@lamphq-org/web-sdk v0.9.6

Lamp Web SDK

This is the SDK for integrating Lamp into your platform. Lamp provides the capability to add interactions to the content on your plaform.

Get Started

Prepare

At the root of your package, create or edit a file .npmrc and add the following line

  @lamphq-org:registry=https://npm.pkg.github.com

Install

Now you can add the SDK to your project using npm or yarn as

  npm install @lamphq-org/web-sdk
  // or
  yarn add @lamphq-org/web-sdk

Initialize

When you initialize the Lamp client, your app gets ready to use all the cool functionalities that Lamp provides.

Initialize the app

  import { initializeClient } from '@lamphq-org/web-sdk'
  initializeClient({
    platformId: 'your_platform_id',
    signature: 'signed token',
    refId: 'user_id_reference',
    role: 'instructor' // can be 'instructor' or 'learner' 
  })

Consuming Lamps

To consume a Lamp's functionalities within your app, just call the consumeLamp function that comes as part of the SDK. Lamps come in different flavors (called types) and it is upto you to decide where in your UI you want to mount the Lamp.

Vanilla

  import { consumeLamp } from '@lamphq-org/web-sdk'

  consumeLamp({
    type: 'donut',  // 'donut', 'classroom', etc.
    target: document.getElementById('mount-elem'), // The lamp app will render inside this element
    metaData: { // contextual meta data for the Lamp
      recorded: true,
    }
  })

React

  import { useRef, useState } from 'react'
  import { consumeLamp } from '@lamphq/web-sdk'

  export const DonutContainer = () => {
    const containerRef = useRef()
    const [donutOpen, setDonutOpen] = useState()
    const closeLamp = useRef()
    useEffect(() => {
      // returns a unmount function used to close the Lamp app
      closeLamp.current = consumeLamp({
        type: 'donut',  // 'donut', 'classroom', etc.
        target: containerRef,
        metaData: { } // optional contextual data
      })
      setDonutOpen(true)
    }, [])

    const handleLampClosed = () => {
      if (closeLamp.current) {
        closeLamp.current()
        setDonutOpen(false)
      }
    }

    return (
      <div class="header">
        {donutOpen && <div class="btn" onClick={handleLampClosed}>
          End Session
        </div>
        }
      </div>
      <div ref={containerRef} style={{ height: '100vh', width: '100vw' }} />
    )
  }