Member Portal Widget

This guide explains how to sign in to Roomstay with the embedded Member Portal Widget.

Examples

import { useState, useEffect } from 'react'
 
import { MemberPortalWidget } from '@roomstay/frontend'
 
function MemberPortalWidgetRenderer() {
  const recent = useRef < HTMLDivElement > null
 
  useEffect(() => {
    if (recent.current) {
      const memberPortalWidget = new MemberPortalWidget(recent.current)
      memberPortalWidget.setConfig({
        // your configs
      })
      memberPortalWidget.start()
    }
  }, [recent])
 
  return (
    <div
      className={`${styles.buttonContainer} ${styles.center}`}
      ref={recent}
    />
  )
}

API

Property	Description	Type	Default
company	An object comprised of important details relating to the company and selected hotel	Company	-
authMenuItem	Custom auth menu item	object	-
buttonClass	The class name of the button	string	-
overlayPlacement	How to position the popover	Placement	`bottom-end`
fallbackPlacements	Allow to specify which position Popper will use on fallback, For more information refer to Popper.js's behavior docs (opens in a new tab)	Placement	-
onSignedIn	Specify a function that will be called after logged in	function(member)	-
onSignedOut	Specify a function that will be called after logged out	function	-

`Company`

Property	Description	Type	Default
colors	The theme specified	object	-
companyShort		string	-
checkoutLink		string	-
hotel		string \| object	-

`Placement`

`IRoomstayMember`

interface IRoomstayMember {
  username: string
  email: string
  forename?: string
  surname?: string
  phoneNumber?: string
  address?: {
    address?: string
    city?: string
    zip?: string
    country?: string
  }
  defaultCard: string
  bookings: IRoomstayMemberBooking[]
  cards: IRoomstayMemberCards[]
}

Introduction Introduction