In the previous articles you created a storyboard that uses HubSpot CRM data as its data source, then added that storyboard to HubSpot. Lets use this storyboard in a Webpage.

The storyboard added to HubSpot can be accessed by using the Idomoo Video module, which was automatically installed on your hub when you installed the connection between Idomoo and HubSpot.

To learn how to create webpages in HubSpot including how to work with modules, follow this link.

While editing a webpage let's add the Idomoo Video module. Follow these steps to see how:

  1. In the Edit Page panel click in the search bar and start typing Idomoo. The list of modules reduces to show only relevant modules.
  2. Drag the Idomoo Video module to your webpage in the location that suites you.
  3. You haven't yet defined anything in the module and the module simply reads: Select a Storyboard. Click the little pencil icon called Edit Module at the top right edge of the module window.
  4. As you can see the module's interface is very similar to HubSpot's own video module, which you can read about here. I won't get into too much detail except for features relating to Idomoo.
  5. From Embed Type click to choose Media Integration then click Select from Idomoo.
  6. In the media browser that opens you see all the storyboards you pushed to HubSpot. Click to choose one of those storyboard. Finally click OK.
  7. You can adjust the various sizing controls which operate the same as HubSpot's own video module mentioned above.
  8. Under the Player Controls section you can choose to do the following:
    1. Turn off autoplay, so that the video does not start to play until the viewer clicks the play button.
    2. Turn on interactive, so any player actions you defined in your storyboard will work in the webpage.
    3. Turn on mute so that videos start playing with no sound, until the viewer turns mute to off.
  9. Once you have defined everything, click Apply Changes at the bottom of the module.

You can now see the module updating in the preview panel to the right of the module editor. You will probably won't see any personalization yet, as this preview is generic, however you can test this webpage for a specific user by using the regular Preview mode.

  1. Click the Preview button at the top right of the interface.
  2. At the top left of the preview interface select a contact from the contact drop-down.
  3. The preview updates and should show a video updated with personalized data for the selected contact.

You're all done setting up the Idomoo Video module for your webpage. The next step after finishing the rest of the design and publishing the webpage, is to get viewer to this webpage by sending them emails linking to this webpage.