I have a deep link to content inside Minecraft. This link will open Minecraft and go straight to a piece of content to purchase. “minecraft://showDressingRoomOffer?offerID=90ac61e6-40d4-4395-b026-96d78f18c1dd” It works if I put the URL in my browser, but I’m trying to get it to open automatically when someone visits a URL on my web site. So, if the user visits www.mysite. com/myproductname, I want that page to redirect them to: “minecraft://showDressingRoomOffer?offerID=90ac61e6-40d4-4395-b026-96d78f18c1dd” which should open the app directly to a product.
All the redirect and forwarding I’ve found on Wix seems to conform the redirect to a http request, so it doesn’t launch the minecraft app on my system…so the link is broken. Anyone know how to get this working on Wix?
You can do this with a CustomElement. Not sure it will do exactly what you want, but here goes…
● Create a Custom Element on your site as described in Velo About Custom Elements .
● When you Set the Location of the JavaScript File , rename the file to deeplink-button.js.
● Add the following code to the deeplink-button.js file substituting your deep link:
const template = document.createElement('template');
template.innerHTML = `
<style>
.container {
padding: 8px;
}
button {
display: block;
overflow: hidden;
position: relative;
padding: 0 16px;
font-size: 16px;
font-weight: bold;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
outline: none;
width: 100%;
height: 40px;
box-sizing: border-box;
border: 1px solid #a1a1a1;
background: #ffffff;
box-shadow: 0 2px 4px 0 rgba(0,0,0, 0.05), 0 2px 8px 0 rgba(161,161,161, 0.4);
color: #363636;
cursor: pointer;
}
</style>
<div class="container">
<button>Leave this site</button>
</div>
`;
class LeaveButton extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({ mode: 'open' });
this._shadowRoot.appendChild(template.content.cloneNode(true));
this.$button = this._shadowRoot.querySelector('button');
this.$button.addEventListener('click', () => {
window.location.assign("slack://open"); // your deep link here
});
}
connectedCallback() {
if (this.hasAttribute('as-atom')) {
this.$container.style.padding = '0px';
}
}
get label() {
return this.getAttribute('label');
}
set label(value) {
this.setAttribute('label', value);
}
static get observedAttributes() {
return ['label'];
}
attributeChangedCallback(name, oldVal, newVal) {
this.render();
}
render() {
this.$button.innerHTML = this.label;
}
}
window.customElements.define('deeplink-button', DeepLinkButton);
● Set the Element Setting like this:
● Save and Publish the site. This will only work on a Live site, not Preview. A Custom Element will only work on a Premium site with a domain attached (which is what you have).
● Click on the Deep Link button and the app in the deep link should open.
You can change the Custom Element code so that, for example, you can set the deep link as a property so the link can be changed with the Velo page code.
That worked. Thank you so much!
What are your thoughts on automatically redirecting to the deeplink instead of requiring a button click? Would be cool to have a redirect page that took a parameter and added that to the deeplink with an auto redirect to that custom deeplink.
Glad it worked!
Sorry about the mess up with the names. I copied this code from another CustomElement I wrote as a Panic Button (leave this site button). I edited my post.
@brian50574 If you want automatic redirecting, then go for it. I just put together a quickie example to show how to do the redirect. Using a button was easier since I used the code from another project which just happened to be a button.
Do you know how we can do it automatically?
Hey Brian, did you solve how to redirect the page automatically to the app?
