TourMkr Documentation

Overlay – Berlin Hotspot

Syafriko Yuliusman -

The other type of hotspot you can add to your overlay is Berlin. This hotspot is highly customizable and used in the same way as the basic Gothru overlay hotspot but distinct in its icon or marker. By default, the basic hotspot comes with a pulse effect, but Berlin uses a standard black and green map marker. This marker can also display custom images or symbols, in this case, it is referred to as "hotspot icon."

Berlin hotspot embeds a popup to your overlay with an image or a video inside. You can also put a title or brief explanation about a room or specified objects in it and a button that redirects to a website. Berlin hotspot now supports nine content types -- simple, HTML, Image-left, Image-top, video-top, image, video, audio, and iframe.

How to Access the Berlin Hotspot Plugin?

1. Go to the plugin manager on the left and click on the “+” icon to open the Plugin Manager for Hotspots, Menus, Maps, Control Center, and Other. Then select the hotspot type.

2. You will find a green and black marker (hotspot icon) appearing exactly in the middle of the active panorama. Click and drag the icon to change the position of the hotspot. You should be careful not to place two hotspots too close to each other, which is easy to click at once.

3. The hotspot settings appear on the right panel consisting of three sections, hotspot, popup, and popup content. Set up the design and fill all the information about the hotspot. If you would like to make more significant changes to the hotspot or give the hotspot an entirely unique popup and contents, see “How to work with the Berlin hotspot settings?” below.

How to work with the Berlin hotspot settings?

The menus under the Berlin hotspot settings are made up of three sections: Hotspot, Popup, and Popup Content.

Hotspot Section

The hotspot section determines the main design of the hotspot. It is where you can enter the hotspot title,  add the hotspot icon, and set up the hotspot configuration.

  • Hotspot title: gives a title to the hotspot. Click on the hotspot title and type in the hotspot title field.
  • Hotspot title always shows: sets the hotspots title to “always show” or “hide”.
  • Hide hotspot icon: sets the hotspots icon to “hide” and content to “auto open”
  • Hotspot centering: applies the hotspot position that's horizontally or vertically aligned with the middle of a panorama.
  • Hotspot icon image: Changes the entire hotspot icon using a custom SVG image. Slide the toggle then click on the Hotspot Image to upload a new image, or select one that’s already in your Asset Manager.
  • Hotspot background color: sets the color of the hotspot background. Default to green.
  • Hotspot Icon: adds a symbol or an image that will be put at the center of the hotspot icon. It makes the hotspot unique to represent the marked object. To add the icon symbol or image, slide the hotspot Icon toggle and select the desired symbols or images. GoThru supports more than 3000 icons.
  • Hotspot alignment: controls the position or orientation of the hotspot icon. Note that the icon symbol or image cannot be directly aligned with the hotspot icon, you can readjust its alignment using the vertical and horizontal alignment sliders.

Under the popup section, you can set up the style and preview customizations to your popups such as popup animation and its configuration.

  • Animation: adds an animation effect to the hotspot popup entrance and close. Slide the animation toggle then select the desired effect such as bouncing, fading, flipping, rotating, sliding, zoom, or other special effects under the animation menu.
  • Area: controls the positions where the hotspot popup appears. You can choose the center, top, bottom, left, or right side of your screen. Defaults to 'center'.
  • Hotspot width and height: adjust the width and height of the hotspot popup. Move the slider to the right to increase the width or height.
  • Margin: adjusts the distance between hotspot content to the end corner of the screen. Slide the slider to set up the popup margin.
  • Border Radius: sets the roundness of the popup corners. Increase the value in each field to make a rounded corner and GoThru Overlay Border Radius will automatically adjust all four corners at once.
  • Shadow depth: sets a shadow effect on the hotspot popup.
  • Popup color menu: modifies the hotspot popup colors. It sets the color combinations so the popup can fit the entire virtual tour. Common colors set the popup colors to connect the colors in the general setting. Hotspot background color sets the color of the popup background. Active color changes the colors of the active hotspot. Text color sets the colors of the text in the popup. GoThru also supports gradient colors, available in 4 different directional gradients and a circular gradient.


Popup Content Section

The popup content section is where you can add content to the popup. The Berlin hotspot now supports nine content types -- simple, HTML, Image-left, Image-top, video-top, image, video, audio, and iframe. Default to the simple content type. Click on the content type under the popup content settings to select a content type for the hotspot.

The following is the brief information about the types of content under the popup content section.

  • Simple: sets a title with a brief explanation.
  • Html: sets HTML code that embeds a webpage and its content.
  • Image-left: sets an image with a caption on the right side.
  • Image-top: sets an image with a caption appended to it.
  • Video-top: sets a video with a caption appended to it.
  • Image: adds an image only to the hotspot content.
  • Video:  adds video only to the hotspot content.
  • Audio: adds audio only to the hotspot content.
  • Iframe: embeds a webpage to the hotspot.

After filling all the information about the hotspot, click “save” and “publish” to see the results.