WGAN-TV: Now Playing
20+ Great Real Estate Photography
Websites for Inspiration
Photographers
and Real Estate Agents
thinking about adding 24/7
Open House Virtual Tours

will succeed faster with
Virtual Tour Pro
Course
by Ben Claremont”
— Dan Smigrod, WGAN Founder
Coupon Code WGANVTP
One Order  |  One Quote  |  One Contact
Book Multiple USA Commercial Locations
  • ✔  As-Builts
  • ✔  Construction Progress
  • ✔  Facillities Management
Last 24 Hours: 719 Unique Visitors
7,457 WGAN Members in 141 Countries
Last 30 Days: 43,303 Page Views | 14,009 Unique Visitors | 60 New Members
We Get Around Network Forum
BrandingCodingLogo

Coding for adding a clickable logo to your Matterport 3D Tours9846

WGAN
Forum
Founder
Atlanta, Georgia
DanSmigrod private msg quote post Address this user
Hi All,

@Wingman shared the following code (below) for adding a clickable logo to your Matterport 3D Tours in this WGAN Forum discussion:

How to add branding (logo) and Video to Matterport 3D Tours

Plus, a related WGAN Forum discussion:

Four Ways to add Your Logo to your Matterport 3D Tour

Best,

Dan

---

≈Quote:
Originally Posted by Wingman
This is a code you can use without Capture3D or any extra overlay. I have rewritten it from the code posted on MOUG as their code is not usable and a logo covers all tour window without any way to open the tour behind it.



<div align="center">
<div style="position: relative; width: 853px; height: 480px">
<img style="width:100px; height:100px; position: absolute; top: 1px; right: 1px; z-index: 1" src="Company-logo.png">
<iframe width="100%" height="100%"
src="https://my.matterport.com/show/?m=GxLp36Ssyrs&hl=1&play=1" frameborder="0"
allowfullscreen></iframe>
</div>
</div>

You can play with a logo position and move it to different corners by changing "top" to "bottom" or "right" to "left".
And I am sure it should not be a problem to turn your logo into a link. Even though the code should be rewritten to include HTML Anchor tag or onclick action added to the image tag with a bit of javascript.

This is what it looks like when teh code above is used.


Quote:
Originally Posted by Wingman
And the code below is a code for a clickable logo

<div align="center">
<div style="position: relative; width: 853px; height: 480px">
<img style="width:100px; height:100px; position: absolute; top: 1px; right: 1px; z-index: 1" src="mylogo.png" onclick="javascript:goTo()">
<iframe width="100%" height="100%"
src="https://my.matterport.com/show/?m=GxLp36Ssyrs&hl=1&play=1" frameborder="0"
allowfullscreen></iframe>
</div>
</div>

<script>
function goTo() {
var myUrl="https://www.wingmanmedia.com.au";
window.open(myUrl);}
</script>

It does not change a cursor style from a cursor to a hand when you bring a cursor over your logo but it can be added too if needed.

Dan if you think it should be moved to a separate topic please do so.
Post 1 IP   flag post
Gerhard private msg quote post Address this user
Put it on the right bottom corner?
Post 2 IP   flag post
WGAN
Forum
Founder
Atlanta, Georgia
DanSmigrod private msg quote post Address this user
@Gerhard

HaHa!

Dan
Post 3 IP   flag post
Standard
Member
Los Angeles
Home3D private msg quote post Address this user
Any specific recommendations as to ideal logo size in pixels? What was the logo size shown in the screen grab example? Thanks.
Post 4 IP   flag post
Wingman private msg quote post Address this user
Quote:
Originally Posted by Gerhard
Put it on the right bottom corner?


:-) you can if want to, just change "top" to "bottom"
Post 5 IP   flag post
Wingman private msg quote post Address this user
Quote:
Originally Posted by Home3D
Any specific recommendations as to ideal logo size in pixels? What was the logo size shown in the screen grab example? Thanks.


It is my Nadir logo for 360, I have used it for illustration only. It is a square 827x827 pixels. You do not need it to be that big as the bigger the image the more time to take to download it.

I would say that something with 300px either in width or height should be ok. How big you want it to be on top of your tour it is up to you. I think that for mine 100px is ok so it not covering something important in the tour.

Just keep in mind that if your logo is not a square and you use identical height and width in pixels in your code your logo will be squashed. In this case you can just specify either height or width in your code to keep you logo in proportion but scale it to a smaller size. Your code will be something like

<img style="width:100px; position: absolute; top: 1px; right: 1px; z-index: 1" src="mylogo.png" onclick="javascript:goTo()">

I have only removed "height:100px;" from the code above.
Post 6 IP   flag post
Wingman private msg quote post Address this user
Quote:
Originally Posted by 3SixtyNow
@Wingman, where are these codes inputted?


It is a modified version of what you will get from Matterport for your model to be embed.

If you mean what places you can use it that way, that's an interesting question. Technically it does not make any sense to use it on your website as your viewers are already on your website and should know it is yours.

MLS probably won't let you use embed code(if they do don't forget to change your logo file name to a full path with a full URL address to where it is stored on the internet.

However if you are sharing a tour with some third party website or with a real estate agent website and they do not mind your logo you can give them that code instead of a basic embed code provided by Matterport.

However with MLS/REA you should specify the full URL for your logo so instead of
<img style="width:100px; height:100px; position: absolute; top: 1px; right: 1px; z-index: 1" src="mylogo.png" onclick="javascript:goTo()">

you need to have something like this

<img style="width:100px; height:100px; position: absolute; top: 1px; right: 1px; z-index: 1" src="https://www.yourwebsite.com/images/mylogo.png" onclick="javascript:goTo()">
Post 7 IP   flag post
Wingman private msg quote post Address this user
It also can be stylized by creating an animation effect this way that while a tour is loading you can have your logo covering the tour completely and once it is ready to view you can move it with some animation effects to a corner opening the tour. If you are interested in it find someone who is good at client side coding with CSS, HTML and javascript. It is not really my area of expertise. I am more a web developer for server side script and databases. Plus I stopped doing it 11 years ago so I do not remember a lot things.


You can also use some kind of a form asking to provide some details before viewing the tour. In this case it won't be an image though it should be either some extra HTML page or a chunk of HTML in the same page defining the form that you can manipulate with "display parameter changing its visibility through javascript.

For this scenario though you need to rewrite my code a lot, have some client side javascript and server side scripts to process a viewer input, store it and remove the form overlay so viewers that have provided all details can access to the tour.

Just keep in mind that it won't be hack proof with unlocking if you use only DIV overlay with the code for the form.

There is a lot of plugins for Internet browsers that let you change what somebody's page looks like. For example Chrome has a web developer plugin and if some website is hiding something behind a div or an image you can modify the website HTML code in your browser and get behind it.

However only few viewers know how to do it so majority of them will give you details to get it unlocked.

You are not really hacking any website this way you just modify what a page looks like after it is loaded from the website in your browser.
Post 8 IP   flag post
85328 8 8
Log in or sign up to compose a reply.