Actions | Viseven Help Center

eWizard.js supports custom Vue.js directives that are under the hood of actions in eWizard Editor. Use the directives to assign certain actions to the components.

The following item types support these actions:

:--- TABS:

TAB: e-Detailer

e-Detailer supports the following actions:

• Open slide

• Open PDF

• Open pop-up

• Open link

TAB: Landing page

Landing page supports the following actions:

• Open PDF

• Open link

TAB: Messenger ad

Messenger ad supports the following actions:

• Open PDF

• Open link

---:

Open slide

Use the v-goto directive with the tap or click event to open a specific slide in your e-Detailer.

TIP: If you don't use the tap event, eWizard.js uses the default click event.

For example, to assign the Open slide action to the wiz-text component, add the v-goto directive and pass the object with the properties as the value.

<!-- ./slides/slider1/index.vue--><template>
<wiz-slide class="editable-block">
<wiz-text :text="$t('title')" id="title" v-goto.tap="{'animation':true,'disabled':false,'slide':'imgtxt3','chapter':'problems'}"></wiz-text>
</wiz-slide>
</template>

When you click or tap the text, the specified slide opens.

The Open slide action has the following properties:

Property	Type	Default	Description
`animation`	Boolean	`true`	The animated transition between the current and the specified slide
`disabled`	Boolean	`false`	Deactivates the Open slide action on the current slide
`slide`	String	N/A	The ID of the slide you go to from the current slide
`chapter`*	String	N/A	The ID of the chapter that contains the specified slide

*Starting from eWizard.js 5.20.0, the chapter field is optional.

If you need to navigate to a specific slide that might be moved between chapters, skip the chapter field. Otherwise, you have to change the chapter value if you move the slide in the e-Detailer.

It's better to specify the chapter field when the navigation is relative and based on the storyboard slides because the transition between slides is faster this way. For example, in the wiz-chapter-menu or wiz-sitemap components.

Open PDF

Use the v-open directive with the pdf modifier and the tap or click event to open the specified PDF document in a new browser tab.

TIP: If you don't use the tap event, eWizard.js uses the default click event.

For example, to assign the Open PDF action to the wiz-button component, add the v-open directive with the pdf modifier and pass the value as a string with the relative path to the PDF document.

:--- TABS:

TAB: e-Detailer

Add the v-open directive with the pdf modifier to the component on a slide in your e-Detailer.

<template>
<wiz-slide class="editable-block">
<wiz-button v-open.pdf.tap="'./media/pdfs/test.pdf'"></wiz-button>
</wiz-slide>
</template>

TAB: Landing page

Add the v-open directive with the pdf modifier to the component in the App.vue file of your landing page.

<template>
<wiz-root style="background: #ffffff; width: 100%" class="editable-block">
<wiz-button v-open.pdf.tap="'./common/media/pdfs/test.pdf'"></wiz-button>
</wiz-root>
</template>

TAB: Messenger ad

Add the v-open directive with the pdf modifier to the component in the App.vue file of your messenger ad.

<template>
<wiz-root style="background: #ffffff; width: 100%">
<wiz-button v-open.pdf.tap="'./common/media/pdfs/test.pdf'"></wiz-button>
</wiz-root>
</template>

---:

Use the filename without its relative path, for example test.pdf instead of ./media/pdfs/test.pdf, if the PDF file is in the project root directory.

Open pop-up

Use the v-open directive with the tap or click event and the popup modifier to open the specified pop-up on a slide.

TIP: If you don't use the tap event, eWizard.js uses the default click event.

For example, to assign the Open pop-up action to the wiz-button component:

1) Add the v-open directive with the popup modifier. Pass the value as a string with the ID of the wiz-popup component you want to open.

<wiz-button v-open.tap.popup="'my-popup'"></wiz-button>

2) Add the wiz-popup component with the ID you reference in the v-open directive.

<wiz-popup id="my-popup"></wiz-popup>

3) Add the wiz-text and wiz-image components inside the wiz-popup component.

<wiz-popup id="my-popup">
<wiz-text :text="$t('popup_text')"></wiz-text>
<wiz-image src="./media/images/popup_image.png"></wiz-image>
</wiz-popup>

4) Add the pop-up text in the i18n localization tag.

<i18n>
{
"eng": {
"popup_text": "This is my awesome pop-up!" 
}
}
</i18n>
<template>
<wiz-slide class="editable-block">
<wiz-button v-open.tap.popup="'my-popup'"></wiz-button>
<wiz-popup id="my-popup">
<wiz-text :text="$t('popup_text')"></wiz-text>
<wiz-image src="./media/images/popup_image.png"></wiz-image>
</wiz-popup>
</wiz-slide>
</template>

Open link

Use the v-open directive with the link modifier and the tap or click event to open the specified URL link in a new browser tab.

TIP: If you don't use the tap event, eWizard.js uses the default click event.

For example, to assign the Open link action to the wiz-button component, add the v-open directive with the link modifier. Pass the value as a string with the URL you want to open in a new browser tab.

:--- TABS:

TAB: e-Detailer

Add the v-open directive with the link modifier to the component on a slide in your e-Detailer.

<template>
<wiz-slide class="editable-block">
<wiz-button v-open.link.tap="'https://viseven.com/'"></wiz-button>
</wiz-slide>
</template>

TAB: Landing page

Add the v-open directive with the link modifier to the component in the App.vue file of your landing page.

<template>
<wiz-root style="background: #ffffff; width: 100%" class="editable-block">
<wiz-button v-open.link.tap="'https://viseven.com/'"></wiz-button>
</wiz-root>
</template>

TAB: Messenger ad

Add the v-open directive with the link modifier to the component in the App.vue file of your messenger ad.

<template>
<wiz-root style="background: #ffffff; width: 100%">
<wiz-button v-open.link.tap="'https://viseven.com/'"></wiz-button>
</wiz-root>
</template>

---:

v-open

Use the v-open directive to configure the PDF document, pop-up, or link opening on a tap or click event for a particular component.

<wiz-button v-open.[MODIFIER_NAME].[EVENT_NAME]="'[STRING_VALUE]'"> </wiz-button>

• MODIFIER_NAME is the pdf, popup, or link modifier.

• EVENT_NAME is the click or tap event. The click event is used by default.

• STRING_VALUE is the string value for the path to the PDF document, ID of the wiz-popup component, or the URL link. For example:

— ./media/pdfs/test.pdf is the path to the PDF document.

— my-popup is the ID of the wiz-popup component.

— https://viseven.com/ is the URL link.

Modifiers

The v-open directive accepts the following modifiers.

link

Use the link modifier to open a URL link in a new browser tab.

<template>
<wiz-button v-open.link="externalLink"></wiz-button>
</template>
<script>
export default {
data() {
return {
externalLink: 'https://viseven.com/',
}
}
}
</script>

pdf

Use the pdf modifier to open a PDF document in a new browser tab.

<template>
<wiz-button v-open.pdf="slidePdf"></wiz-button>
</template>
<script>
import slidePdf from './media/pdfs/test.pdf';
export default {
data() {
return {
slidePdf,
}
}
}
</script>

To open a pop-up on a slide with the popup modifier:

1) Add the wiz-popup component id as a string value to the v-open action.

2) Enter the text that appears inside the pop-up to the wiz-text component in the wiz-popup component.

<i18n>
{
"eng": {
"text": "Click to open my awesome pop-up!",
"popup_text": "This is my awesome pup-up!"
}
}
</i18n>
<template>
<div class="layout">
<wiz-button :text="$t('text')" v-open.popup="'awesomePopup'"></wiz-button>
<wiz-popup id="awesomePopup">
<wiz-text :text="$t('popup_text')"></wiz-text>
</wiz-popup>
</div>
</template>

Event

The v-open directive uses the click or tap event that triggers an action. When the event is missing, the default click is used.

<wiz-button v-open.link.tap="'https://viseven.com/'"></wiz-button>

v-goto

Use the v-goto directive to configure navigation to a specific slide.

<wiz-button v-goto.[EVENT_NAME].[MODIFIER_NAME]="{options}"> </wiz-button>

The v-goto directive accepts an object that specifies a slide and chapter ID to navigate to. The options are the same as goTo API method options. The click event is used by default.

<template>
<wiz-button v-goto="navOptions"></wiz-button>
</template>
<script>
export default {
data() {
return {
navOptions:{
slide: 'default',
chapter: 'main',
animation: false,
}
}
}
}
</script>

Modifiers

The v-goto directive accepts the following modifiers.

The prev modifier configures navigation to the previous slide.

<wiz-button v-goto.tap.prev="{}"></wiz-button>

The next modifier configures navigation to the next slide.

<wiz-button v-goto.tap.next="{}"></wiz-button>

Event

The v-goto directive uses the event that triggers navigation: tap or click event.

<wiz-button v-goto.tap.prev="{}"></wiz-button>

v-switch

The v-switch directive switches visibility of the DOM elements. This directive allows to show and hide the specified components simultaneously when you tap or click the bound component. This is a one-time action.

<wiz-button v-switch.[EVENT_NAME]="{ show: '[id...]', hide: '[id...]' }"> </wiz-button>

• id is the component ID, for example: <wiz-text id="title"></wiz-text>. You can provide an array of IDs.

• EVENT_NAME is the click or tap event. The click event is used by default.

For example, show specific text when the slide opens. Then hide this text and show another text when you click the button.

<i18n>
{
"eng": {
"show1": "Hello!",
"show2": "This text was initially hidden!",
"hide": "This text is initially visible, but it will be hidden after clicking the button"
}
}
</i18n><template>
<wiz-slide>
<wiz-text id="textToShow1" :text="$t('show1')"></wiz-text>
<wiz-text id="textToShow2" :text="$t('show2')"></wiz-text>
<wiz-text id="textToHide" :text="$t('hide')"></wiz-text>
<wiz-button v-switch.click="{ show: ['textToShow1','textToShow2'], hide: 'textToHide'}" ></wiz-button>
</wiz-slide>
</template>

Value

Describe the value passed to the directive as an object literal with the show and hide fields.

• The show field contains an ID or a list of IDs for the components to show when you trigger the event. For example, click the button.

• The hide field contains an ID or a list of IDs for the components to hide when you trigger the event.

After slide loading, the v-switch directive forces to hide all components defined in the show field and show all components defined in the hide field.

To show and hide components, the v-switch directive toggles their HTML visibility property: visibility: hidden or visibility: visible.

Event

The v-switch directive uses the event which triggers the switching of element visibility. Defaults to click.

v-toggle

Use the v-toggle directive to turn on/off visibility of a DOM element or list of elements when the specified event occurs.

<wiz-button v-toggle.[EVENT_NAME]="['id', ...]"></wiz-button>

• id is the component ID, for example: <wiz-text id="toToggle"></wiz-text> or <wiz-image id="my-image"></wiz-image>. You can provide an array of IDs.

• EVENT_NAME is the click or tap event. The default event is click.

For example, add the button to show or hide the wiz-text and wiz-image components on a slide when you click this button with the v-toggle directive.

<i18n>
{
"eng": {
"toggle": "Some text that must be toggled"
}
}
</i18n><template>
<wiz-slide>
<wiz-text id="toToggle" :text="$t('toggle')"></wiz-text>
<wiz-image id="my-image" src="./media/images/image.png"></wiz-image>
<wiz-button v-toggle.tap="['toToggle', my-image']"></wiz-button>
</wiz-slide>
</template>

Value

The v-toggle directive accepts an ID or a list of IDs for the components to show or hide when you trigger the event. For example, click the button.

To show and hide components, the v-toggle directive turns on/off their HTML visibility property: visibility: hidden or visibility: visible. The default value is hidden.

Event

The v-toggle directive uses the event name which turns on/off visibility of target elements. Defaults to click.

v-outside-click

The v-outside-click directive calls a function when you click something outside of the target DOM element. For example, you can use this directive to close the pop-up when you click outside of it.

<wiz-button v-outside-click="onOutsideClick" :text="$t('buttonText')"></wiz-button>

For example, add v-outside-click directive to the wiz-button component. The directive calls the onOutsideClick function to count clicks outside of this button.

<i18n>
{
    "eng": {
"buttonText": "<div style=\"line-height: 16px; text-align: center; color: #fafafa;\"><span style=\"font-size: 14px;\">No clicks, click outside</span></div>",
"clicksCounterText": "Clicks: {count}"
    }
}
</i18n><template>
<wiz-slide class="editable-block">
<wiz-button v-outside-click="onOutsideClick" :text="$t('buttonText')"></wiz-button>
<wiz-text :text="$t('clicksCounterText', { count: this.clicks })"></wiz-text>
</wiz-slide>
</template>
<script>
export default {
components: {},
data() { 
return {
clicks: 0,
};
},
methods: {
onOutsideClick(event) {
this.clicks++;
}
}
};
</script>

Value

The v-outside-click directive accepts a function that's triggered when you click something outside of the component with this directive.

Event

The v-outside-click directive doesn't have modifiers. Only the click event is supported.