Welcome to Touchpoint Video

A powerful B2C video player and platform built for marketers. It's primary purpose is to enable viewers to participate in the actions you make available as the video plays through. There are a range of options to work with. Watch some demos and tutorials here

The TPV UI expands as you progress. It can be thought of in terms of sections.

1. Title
2. Wizards
3. Player Options
4. Hotspots
5. Test & Publish

Full UI

A sandbox is created for each project. Clicking the Save icon saves to the sandbox and copies to production in one click. (don't want it public? Set it to unpublished in your Dashboard)

BRANDING: The TPV player can be completely branded to a company's style. It also lets you create clickable "hotspots" the viewer can interact with. In this user guide you will find information on all its features. You can also visit the new forum where you can ask questions.

The TPV player interactivity extends to mobile and tablet. You can make interactive videos for mobile like interactive business cards. A mobile business card can be saved to a users home screen on their phone so are quite powerful.

We recommend creating different versions of an interactive video when catering for desktop, tablet and mobile. You can clone a project in one click then adjust the screen resolution and hotspots.

To make full use of the platform some web design/development experience will be helpful although not required. If you know what a click handler is and CSS you'll be right at home. One feature of TPV is the level of control available to you.

When updating css or script handlers the correct syntax is required. Things like missing semi colans or a stray apostrophe can produce errors and affect the display and performance.

Before jumping into the wizards let's think about preparing for an interactive video. TPV links to files. Assets can also be stored here via Import / Upload. Deleting a project will delete any uploaded files from the server.

If your video is publically available on YouTube you can import it into TPV. The platform imports channel details and a link to the video however you will want to replace YouTube's dynamic expirable link with a link to the mp4. Otherwise you will have playback issues due to the expirable nature of YouTube video links.

Wizards

When you click Begin Project the first of three Wizards appear. Here you set the title and enter the mp4 and poster urls. If you uploaded your mp4 and poster it will populate these fields once the upload is complete.

The Import / Upload button opens a model that will let you either retrieve the YouTube, Rumble or Bitchute video file or can often retrieve mp4's from a page if they are embedded in a HTML5 video player. If several HTML5 players exist on the page and the video and poster are identified they will appear in the Import modal. You choose the one you want to work on.

A second alternative is to upload your mp4 and poster to our cdn.myapi.cloud/repo/ server. Here a second modal opens where you can upload images and an mp4 up to 50MB in size. The files will be renamed and align with your account id and project id.

myvideo.mp4 will become myaccountid_projectid.mp4
myposter.png will become myaccountid_projectid.png

If the file you upload has odd characters or includes other file extensions, for example if you convert a jpg to webp file you may download mypic.jpg.webp instead of mypic.webp. You'll want to rename files so a dot and file extension only appear once. Rule of thumb: Remove unnecessary dots. Otherwise there may be issues renaming and returning the correct name.

On completing this you close the models and return to the main screen.

You also have an option to set up hotspots here but you can do this later if you prefer.

Hotspots are a part of the video you can click and it does something. They sit in an invisible layer over the top of the video.

When using hotspots we recommend setting up one hotspot to begin with as you can add more later and you can clone hotspots. Cloning is useful if you are setting up similar hotspots like video chapters that jump to different parts of the video. This is covered in the Hotspot Inspector.

The Next button appears which transfers the mp4, poster and hotspot links into the program and leads to Wizard 2. Wizard 1 data will now be accessible in the Player Options section.

Wizard 2 will already be populated if you imported a video from YouTube. You decide whether it's a personal, company or client/offer project. You can also setup brand colors and use one as the progressbar color by clicking it. Fill in the company and client/offer details and click Next.

Wizard 3 sets the images/logos used when the video is paused. The company image/logo will appear in the video controlbar and the client/offer image will appear in a corner of the player.

Click Next to complete the Wizard setup. The top wizard section will disappear and the project title will appear in the top right menu. Clicking it will reopen the Wizard area. Now we get into refining the player options.

There are 3 sections which contain default settings and the wizard settings you previously entered so much of the work here is done.

1. iFrame and Player Attributes
2. MP4 & Poster URL (Wizard 1)
3. Logo Image & URL (Wizard 2 & 3)

iFrame and Player Attributes define the iframe size, border radius, whether to display the controlbar and the progressbar color (Wizard 2). Size options include pixels, viewport width/height and %.

You also have the option to include Chromecast and Airplay for viewing on the TV. Note: Interactivity will pause while the video is being watched on the TV.

After Logo and Image urls are populated click Next. This will reveal the design player and hotspot inspector (if you've opted to use hotpots). If you didn't opt for hotspots earlier two buttons let you add and remove them here.

Once you add the first one the Hotspot Inspector will appear. See more about the design player under Test Players and more about hotspots under Hotspot Inspector.

Hotspots have four essential elements to them. The type of hotspot, what action it performs, when it enters and exits and what it looks like. You can use CSS to style each hotspot.

You set these and click Add Hotspot. This adds the hotspot to the design player where you can drag it into position and test it entering and exiting. Everytime you make a change in the inspector click Update Hotspot to update the player.

The Hotspot Inspector lets you work on your individual hotspots. A navagation button containing the hotspot number appears above the hotspot panel and you navigate between panels using the buttons.

There are 4 players that focus on different features of the video.

1. Mini player (establishes the video can be used)
2. Color player (used to pull colors from the video)
3. Design player (used to add, position and test hostpots)
4. Test player (used to test the production)

The Mini player appears in Wizard 1 after you have added or imported the video. It establishes the video was able to load. If the video doesn't appear here it won't appear in the production. Check the url if you're expecting the video to load. We recommend using mp4's and if expecting a lot of traffic storing it on a fast server. Clicking Next will remove this Wizard from the UI.

Remaining players

The Color player appears in Wizard 2 and is used to pull colors from the video should you desire. Click the color box to its right to reveal an eyedropper. Click the eyedropper then hover over the color in the player you want to use and click. It will be sent to the color box. Click the color box to set it as the primary or secondary color. Click the color circle to set the color as the progressbar color.

The third player is the Design player and appears once you have populated the player options.

The design player is responsive. When you modify the iframe width and height in the player options the new dimensions will be reflected in the design player (and test player). The design player allows you to test the hotspots you create in the Hotspot Inspector. Once you add them you can drag them into position. The hotspot actions aren't responsive, to test those you click Test and use the test player that appears underneath to test actions (click handlers).

There are two quirks with the design player. 1) Hotspots appear in it when you navigate the Hotspot buttons in the Inspector. 2) All hotspots sometimes appear when you reload a project for further editing. Playing then pausing the video in the design player will hide all hotspots that shouldn't be in view.

The fourth player is the Test player and has two modes. Sandbox and Public. The test player will display all hotspots when in sandbox mode and all available hotspots in public mode. Free and Pro accounts will limit the public to the first 1 or 3 hotspots (unless they have been unlocked).

The test player will also appear in the test page when you choose to sandbox the page it's designed for. See Test Page.

The Test page section is located under the Test player and can often replicate the page the video will appear in by entering the URL and clicking Load.

Some websites can't be sandboxed using this method so there is an icon next to the page url text field that provides a different method. Clicking it will display an Embed textarea and a Base url textbox. The textbox requires the page url to be entered.

The Embed textarea requires you to visit the page and right mouse click in it and select Inspect. The page source will appear and you navigate to the top and select the HTML tag, right click and select Copy OuterHTML then paste that into the Embed textarea and click Create.

At this point a replica of the page should appear. It will include four buttons in the top right. Embed, Edit, Test and Save.

First click Embed. This will copy the Test player into the bottom of the page. If you were in sandbox mode when testing the video the sandboxed version will be copied. If you were in public mode the public version will be copied.

Next click Edit. This will place the document in edit mode where you can change the text.

Place the cursor to the right of the test player and press Shift+left arrow. This should highlight the player. Now press Ctrl+X (Cmd+X on Mac) to cut the player out of the page and place the mouse where you want it to appear and press Ctrl+V (Cmd+V on Mac) to paste it back into the page.

If replacing the YouTube version of the video that's in the page, place the cursor to the right of the YouTube video then press Delete on your keyboard. This will delete the YouTube version. Now press Ctrl+V (Cmd+V on Mac) to paste the interactive version back into the page.

If you imported a video from a page that was in a HTML5 player TPV may automatically replace the HTML5 version with the interactive version and remove the need to cut/paste.

You should now see your interactive version in the page. Press the Test button and play the video. If it is working as expected click Save. This will create a version you can show clients, prospects or stakeholders.

All saved versions are accessible from your Dashboard.

TPV saves both your project and the platform state. When you reload a project the UI returns to the state you left it. Everything is saved to a sandbox and copied into production.

When building a project the save icon becomes visible once the player options are set. When changes are made to the wizards, player options and hotspot inspector the icon turns red. Clicking it will save everything and return it to grey.

Top Menu contains a link to your dashboard. It also contains

1. Name/organisation
2. To Do - text editor
3. New Project
4. Dashboard
5. Project title
6. Log out

The Dashboard is also where you can access your Account details and the Forum.


Each video contains these buttons, links and information

1. Text: Time and date of creation
2. Text: Video title
3. Image: Video poster
4. View the video
5. Edit the video
6. Clone the video
7. Get the embed code
8. Set the status to Publish or Unpublish
9. Delete the video
10. View any test pages
11. Add code to the head and footer
12. Sticky note about this project.
13. Collaborate (coming)
14. Text: Project ID
15. Link: View stats - Stats use 3rd party services and if active can be viewed here
16. Link: Unlock all Hotspots (free & pro)

Your account contains the following details.

1. Name / Organization
2. Avatar
3. Email - can't be changed
4. Plan - change plan - close account
5. Join date
6. Old password (enter here to update password)
7. New password
8. Confirm password

Visit Paypal for your transactions. If upgrading or downgrading your account you will need to order a new plan then cancel your current subscription within Paypal.

Visit the new forum to ask any questions and we'll post answers there. This may help other users and save us from answering the same question over and over.

You can also reach us at support@touchpoint.video

Thanks for using TPV. We're a lean team with big plans for the platform. We love getting feature requests so list them in the forum.

Steve Forster, Founder and CEO
Touchpoint Video

You can work top down in the hotspot panel first defining the hotspot type.

Options include using a button, text, image or mask. Various options appear depending on your choice. More details can be found under Hotspot Types and Hotspot Actions.

Other panel fields and controls include

1. the hotspot in/out point
2. a GO button to move the video to the in/out point
3. a tooltip that will appear when the users mouse hovers over the hotspot.
   
   This action also populates the GUI Hotspot button title so hovering will reveal the tooltip. And it will be attached to the stats (in dev atm).
4. classes to add to the hotspot. Dashboard > Project > "Embed analytics and more" button to create classes or link a stylesheet
5. the hotspot width/height
6. the hotspot top/bottom and left/right position
7. Preview the hotspot
8. Zoom in/out of the preview container

Your hotspot appears in the preview container and updates dynamically as you make changes. This is usually fixed but may drag elements in tandem with dragging them in the design player. If preview elements drag off screen zoom out to reduce their size in the preview container.

The width/height and top/bottom left/right positions can use pixel, viewport (vw/vh) and percentage measurments. The default is pixels and when dragging a hotspot into position pixel measurements will populate the top/left fields. If using other measurements you will need to adjust the fields.

When using viewport measurements you will need to allow for a difference between the design player and test player. The design player uses the viewport width of the browser whereas the test player uses the viewport width of the iframe it's contained in.

If for example you wanted an image in the top right of the player you might set the width to 93vw; This could line up perfectly in the test player iframe but would be located too far to the right in the design player. The test player will display the correct settings.

Functions in each panel include

1. Add/Update Hotspot button
2. Clone Hotspot icon
3. Click Handler icon (binoculars)
4. Parent communication (handshake icon)

Parent communication reveals the code required to add to the parent document. Include this when adding the embed code to the page. Typically you add it in the document head.

When you select Link, Timeline or Parent the click handler is populated. Click the binoculars to view and adjust the code.

Developers note: You can add additional handlers such as onmouseover, onblur, etc after the onclick handler.

The Clone icon will make a copy of the current hotspot and add it after the last hotspot panel.

There are 4 types of hotspot you can choose from.

1. Button
2. Text
3. Image
4. Mask

When you select a hotspot some options will appear relavent to the hotspot.

Click the binoculars to see the click handler. The click handler is a short string of javascript that controls the action. This will also change depending on the hotspot type and action.

Button, Image and Mask all require a click handler. For Text the handler is optional.

If you don't want a link, timeline or parent action to occur for a Text hotspot you can delete the click handler by clearing the textarea it appears in. This is useful if you only want a decorative word or statement to appear but no action should the user click it.

Button options: Enter the button text, add optional css styling and choose an action.

Image options: Enter the image url, set the width/height then choose an action. Image resources will become available through the year.

Mask options: Masks can be placed over a section of the video, say when a logo appears. Select the shape (square, rectangle, circle) and adjust width and height. Include an optional hover effect and color for when the mouse is over the mask.

Text options: Add text (and/or basic html), click Add Hotspot and the text will appear in the design player. Drag it into position then use the inspector to refine the display. Avoid using apostrophe's ( ' ) and quotes ( " ) where possible as they can cause errors in the output script. If you add one a precaution notice will appear reiterating this.

There are currently 3 types of actions to choose from.

1. Link
2. Timeline
3. Parent (covered in the next section)

Link options:
Enter the url in the text box and click the binoculars to see the click handler.

The click handler contains the link and target window. The default target is "_blank" which will open the link in a new tab. This can be changed to "_top" to load the link over the current page or "_self" to load the page into the player window. You would use this if linking to another interactive video.

The Link click handler can also be modified for email or phone by using onclick="location.href='mailto:me@mysite.com'" and onclick="location.href='tel:5556565'"

Timeline options:
Jump to a different part of the video.

Use the design player to locate the point in the video you want to jump to. When you pause the video at that point the current time in seconds will appear above the player. Copy that into the Play From text field. Use the Go button to go to that point in the design player when you need to.

Parent options:
Dispatch messages to the parent window. Catch the messages in the parent window and do something.

Click the handshake icon next to the binoculars to get the code for the parent and see some examples of how to structure the click handler.

The parent domain needs to be included in the click handler for the message to be accepted.

Successfully testing this requires you saving and publishing the video and adding the embed code to a document on the parent domain. Here you may need to create a duplicate of the host page to test the dispatch is working properly. Testing it from TPV won't work as the domains won't match up.

Visit https://leafluxe.mockup.page to see an example. You can view the source of this page and the video iframe to see how the code interacts.

As mentioned in the overview a sandbox is created for each project. You can save throughout the creation process by clicking the Save icon and then test. Clicking Save will save to the sandbox and copy to production. You can change the Publish status to unpublished from your dashboard.

More details are under Save & Publish