Coding for adding a clickable logo to your Matterport 3D Tours9846
Pages:
1
 WGAN ForumFounder & WGAN-TV Podcast Host 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 Quote: Originally Posted by Wingman |
||
| 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 & WGAN-TV Podcast Host Atlanta, Georgia |
DanSmigrod private msg quote post Address this user | |
| @Gerhard HaHa! Dan |
||
| Post 3 • IP flag post | ||
 WGANStandard 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 | ||
 WGAN FanClub Member Queensland, Australia |
Wingman private msg quote post Address this user | |
Quote:Originally Posted by Gerhard :-) you can if want to, just change "top" to "bottom" |
||
| Post 5 • IP flag post | ||
|
WGAN Fan Club Member Queensland, Australia |
Wingman private msg quote post Address this user | |
Quote:Originally Posted by Home3D 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 | ||
|
WGAN Fan Club Member Queensland, Australia |
Wingman private msg quote post Address this user | |
Quote:Originally Posted by 3SixtyNow 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 | ||
|
WGAN Fan Club Member Queensland, Australia |
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 | ||
Pages:
1This topic is archived. Start new topic?