Launching a website

A website can be launched in a script from an event using the following line of code:

window.open('https://www.zappar.com/');

This method leverages the window.open Web API; which you can learn more about here.

Custom website launch Behavior

This step-by-step tutorial will walk you through adding a Custom Behavior to a button, which will launch a website in another window.

As this implementation utilises the window.open Web API, you can add various parameters supported by this method, for example to change whether the website is launched in the current or a new tab.

This tutorial assumes that your button (an image or a HTML node for example) has already been added to the Hierarchy.

1. Click on your button in the Hierarchy and then find the Behaviors Panel. Click on the plus (+) icon in the Behaviors Panel and then + New Custom Behavior.

2. Give your custom behavior a name and then click on Create.

If you want your custom behavior to take effect in the Mattercraft editor, check the Run at Design Time box.

3. Head to the Left Menu and double click on your custom behavior to open it in the Mattercraft scripting environment.

You can also open the script by right clicking on it in the Left Menu and going to Open to the Side

4. Add a method with the @zRegister decorator to handle click events and open the website:

@zRegister('onClick')
private _handleClick() {
    window.open('https://www.zappar.com/');
}

You may need to use 'onPointerDown' instead of 'onClick', depending on the node you are using as a button.

this.instance will target only the node(s) this behavior is attached to, whilst this.zcomponent.nodes will search through your project to target a node which may or may not have this behavior attached to it.

5. Your full behavior should look something like this:

import { Behavior, zBehavior, zRegister } from '@zcomponent/core';
import { Button } from '@zcomponent/html/lib/button';
import Scene from './Scene.zcomp';

@zBehavior({ icon: 'open_in_new' })
export class LaunchWebsiteBehavior extends Behavior<Button> {
    protected zcomponent = this.getZComponentInstance(Scene);

    @zRegister('onClick')
    private _handleClick() {
        window.open('https://www.zappar.com/');
    }
}