Viewer configuration

Pass viewerConfig when you create the client to set how the panorama viewers render. It is read by Viewer and PublicViewer, so one object covers every viewer in your app.

src/client.ts

import { NoughtyToursController } from "@thenoughtyfox/noughty-tours-web-sdk";

export const NTController = new NoughtyToursController({
  getBearerToken,
  viewerConfig: {
    logoUrl: "https://cdn.example.com/logo.jpg",
    isLogoSticky: false,
    showFloorPlan: true,
    showMinimap: true,
    showRoomPlan: true
  }
});

Settings

Setting	Type	Description
logoUrl	string | null	Image drawn over the panorama poles. null and undefined both mean no logo.
isLogoSticky	boolean	Whether the logo turns with the visitor so it always reads upright. Defaults to true.
showFloorPlan	boolean	Whether the viewer offers the floor plan. Defaults to true.
showRoomPlan	boolean	Whether the viewer offers the room plan. Defaults to true.
showMinimap	boolean	Whether the viewer shows the minimap. Defaults to true.

Reading the config

useViewerConfig() returns the same settings, for your own components to read:

import { useViewerConfig } from "@thenoughtyfox/noughty-tours-web-sdk";

function TourHeader() {
  const { logoUrl } = useViewerConfig();

  return logoUrl ? <img src={logoUrl} alt="" /> : null;
}

It reads through the client supplied by NoughtyToursProvider, so call it from inside that provider.

Where the settings are typed

See ViewerConfig.