This tutorial shows how to build an e-Detailer with images, eWizard components, and animation within slides. You can use HTML, CSS, and eWizard components to add:
• slides
• content
• animation
• styles
Create an e-Detailer project
To create an e-Detailer project:
1) Install eWizard CLI on your PC.
2) Initialize an e-Detailer project.
eWizard CLI adds the e-Detailer project with a scaffolding template and a directory structure. To edit a slide, open the slides directory in a file explorer or an IDE. Each slide is stored in a subdirectory within the slides directory. Here is an example of an e-Detailer directory with five slides: default, slide, slide2, slide3, and slide4:
For more information, see e-Detailer directory structure.
Each slide has a media subdirectory that contains all media used in a slide: fonts, images, PDF files, and videos.
You can add markup, components, style, and logic in the index.vue file of each slide subdirectory.
The default index.vue file has the following structure:
<i18n>
{
"eng": {
"text": "Welcome to the slide!"
}
}
</i18n><template>
<wiz-slide>
<wiz-text :text="$t('text')"></wiz-text>
</wiz-slide>
</template>
<script>
export default {};
</script>
<style scoped></style>Use the <template> tag to set the list of components for the slide. You can use various components, such as text, images, buttons, and sliders. For more information about e-Detailer components, see e-Detailer components list.
NOTE: There can be only one <template> tag in a file and it can't be removed. You can put components only in the <template> tag.
Run a development build
You can run a development build locally to preview your slide before archiving.
To run a live development build:
1) Open the directory of your e-Detailer in a CLI.
2) Run:
wiz dev --live
The --live option continiously builds and updates your project as you make any changes. For more information about the wiz dev command, see wiz dev [options].
After running the wiz dev command, the build directory is created in your project. For more information, see e-Detailer directory structure.
The default e-Detailer looks like this:
Add text to a slide
Use eWizard.js components to add content to your e-Detailer.
You can add text to a slide with the wiz-text component. For more information about the component, see wiz-text.
To add text to a slide:
1) Open the directory of your e-Detailer in an IDE.
2) Go to the slides/default directory. The default directory contains the slide you want to edit.
3) Open the index.vue file.
4) Use the wiz-text component to add text:
<!-- ./slides/default/index.vue --><i18n>
{
"eng": {
"text": "Welcome to the slide!"
}
}
</i18n><template>
<wiz-slide>
<wiz-text :text="$t('text')"></wiz-text>
</wiz-slide>
</template>
<script>
export default {};
</script>
<style scoped></style>5) Modify the value of the text variable within the <i18n> tag. For example, enter My first slide as the text that is displayed on the slide:
<!-- ../index.vue --><i18n>
{
"eng": {
"text": "My first slide"
}
}
</i18n>As a result, you can preview your slide with the added text:
Add an image to a slide
To add an image to the slide:
1) Open the directory of your e-Detailer in an IDE.
2) Go to the slides/default directory. The default directory contains the slide you want to edit.
3) Open the index.vue file.
4) Use the wiz-image component to add an image.
For example:
<!-- ../index.vue --><i18n>
{
"eng": {
"title": "<span style='line-height:30px;font-size:30px;'>An image</span>"
}
}
</i18n><template>
<wiz-slide>
<wiz-text :text="$t('title')" id="title"></wiz-text>
<div class="image-layout">
<wiz-image :src="defaultImage" class="slide-image"></wiz-image>
</div>
</wiz-slide>
</template><script>
import defaultImage from './media/images/default-image2.png';export default {
data() {
return {
defaultImage,
};
},
};
</script>
<style scoped></style>The defaultImage variable defines the image that you use on the slide. Specify the image source for the defaultImage with the import variable.
Also, you can enter the path to the image in the src attribute. For example:
<wiz-image src="./media/images/default-image2.png" class="slide-image"></wiz-image>
For more information, see wiz-image.
TIP: If you want to use an image only in one slide, place it in the ./slides/SLIDE_NAME/media/images/ directory. To reuse an image in multiple slides, place the image in the common/media/images directory.
Edit a master template
By default, you can edit each e-Detailer slide separately in eWizard Editor. The changes are saved in the index.vue file of each slide directory. In Master template mode, you can edit all slides of an e-Detailer at the same time. Changes in Master template mode are applied to all slides at the same time and saved in the App.vue file.
TIP: You can add localization to the App.vue file. For more information, see Localization of master template.
To edit a master template:
1) Upload your e-Detailer in eWizard Editor.
2) Activate the Master template mode.
3) Add components and blocks in eWizard Editor. For more information about component installation see Install components.
NOTE: As best practice, use eWizard Editor to add and edit the components.
Blocks and components added in Master template mode are displayed in the <wiz-root> tag of the App.vue file.
For example, <wiz-text>, <wiz-image> components, and the module-placeholder block:
NOTE: The id and class attribute is required for the correct display of styles in eWizard Editor.
<!-- ./App.vue --><i18n>
{
"eng": {
"wiz_text_c66d": "<p style=\"text-align:center;\">Text</p>",
}
}
</i18n><template>
<wiz-root class="editable-block">
<wiz-viewer>
<header></header>
<footer></footer>
</wiz-viewer>
<wiz-text id="wiz-text-59fe" class="default" :text="$t('wiz_text_c66d')"></wiz-text>
<wiz-image id="wiz-image-22fe" class="default" src="./common/media/images/f6194d90-8f03-11ec-96c2-ea6c057b1b2f.jpg"></wiz-image>
<wiz-block class="module-placeholder" data-block-id="module-placeholder" id="wiz-block-f7ff"></wiz-block>
</wiz-root>
</template><script>
export default {
components: {},
name: 'wiz-app',
data() {
return {};
},
};
</script><style scoped>
@import 'common/styles/imports.css';
body {
padding: 0;
margin: 0;
}
.root {
background-color: #fff;
}
</style><style scoped editor>
#wiz-text-59fe {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: matrix(1, 0, 0, 1, 119.778, 126.389);
-ms-transform: matrix(1, 0, 0, 1, 119.778, 126.389);
transform: matrix(1, 0, 0, 1, 119.778, 126.389);
height: auto;
}
#wiz-image-22fe {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
-webkit-transform: matrix(1, 0, 0, 1, 267.56, 230.67);
-ms-transform: matrix(1, 0, 0, 1, 267.56, 230.67);
transform: matrix(1, 0, 0, 1, 267.56, 230.67);
width: 320px;
height: 213px;
}
#wiz-text-3417 {
position: absolute;
top: 0px;
left: 0px;
z-index: 3;
-webkit-transform: matrix(1, 0, 0, 1, 269.778, 549.722);
-ms-transform: matrix(1, 0, 0, 1, 269.778, 549.722);
transform: matrix(1, 0, 0, 1, 269.778, 549.722);
height: auto;
}
#wiz-block-f7ff {
z-index: 4;
}
</style>Change e-Detailer structure
Each e-Detailer has a specific structure that's defined in the structure.json file of an e-Detailer directory.
The e-Detailer structure is defined in the structure.json file of an e-Detailer directory.
For more information, see e-Detailer structure.
This is an example of a structure.json file for an e-Detailer with four slides: default, slide2, slide3, slide4.
// ./structure.json{
"slides": {
"default": {
"name": "Template Slide",
"template": "slides/default/index.vue"
},
"slide2": {
"name": "slide2",
"template": "slides/slide2/index.vue"
},
"slide3": {
"name": "slide3",
"template": "slides/slide3/index.vue"
},
"slide": {
"name": "slide",
"template": "slides/slide/index.vue"
},
"slide4": {
"name": "slide4",
"template": "slides/slide4/index.vue"
}
},
"chapters": {
"main": {
"name": "Template Chapter",
"content": [
"default",
]
}
},
"storyboard": [
"main"
],
"start": {}
}Add a new slide
A slide is a an e-Detailer page that separates it's content. A slide can consist of multiple subslides. Slides are grouped into chapters. The chapters are defined in storyboards, so that they are displayed in an e-Detailer.
To add a new slide, run:
wiz slide [SLIDE_ID]
A new slide directory is created in the ./slides/ directory. The slide ID is the same as the directory name. For example, default is both the slide ID and the directory name.
For more information about the wiz slide command, see wiz slide [options].
Every slide ID is displayed in the structure.json file. For example:
// ./structure.json{
"slides": {
"default": {
"name": "Template Slide",
"template": "slides/default/index.vue"
},
}
}Each slide has the following fields:
• name is the name of the slide in eWizard Editor.
• template is a reference to the Vue component associated with the slide.
For more information, see Slides.
Add subslides
You can use subslides to add more info on the same slide.
To add subslides:
1) Open the structure.json file of your e-Detailer directory.
2) Set the subslides in the subslides array. Here is a default slide with two subslides: slide3 and slide4:
// ./structure.json"slides": {
"default": {
"name": "Template Slide",
"template": "slides/default/index.vue",
"subslides": [
"slide3",
"slide4"
]
}For more information, see Subslides.
Add a chapter
Group your slides into chapters to add more structure to the content within the e-Detailer.
To add a slide to a chapter:
1) Open the structure.json file of your e-Detailer directory.
2) Set the chapters in the chapter object. The following example has two chapters, template and main:
// ./structure.json"chapters": {
"template": {
"name": "Template Chapter",
"content": [
"default",
"slide2"
]
},
"main": {
"name": "Template Chapter",
"content": [
"slide3",
"slide4"
]
}
},3) Enter the slide IDs for each chapter in the content array.
The slides are demonstrated in the display order defined within each chapter. In this example, the slide2 slide is displayed after the default slide in the template chapter.
For more information, see Chapters.
Add a storyboard
To switch between the e-Detailer chapters, add them to the storyboard array.
NOTE: eWizard.js treats chapters outside of storyboards as hidden. You can access hidden chapters only through the address bar.
To add a chapter to the storyboard:
1) Open the structure.json file of your e-Detailer directory.
2) Set the chapters in the storyboard array. There are two chapters in the following storyboard: template and main.
// ./structure.json"storyboard": [ "template", "main" ],
The storyboard array defines the display order of the chapters. In this example, the main chapter is displayed after the template chapter.
For more information, see Storyboard.
Set the first displayed slide
Use the start object to set the first demonstrated slide and chapter of your e-Detailer.
To use the start object:
1) Open the structure.json file of your e-Detailer directory.
2) Set the starting slide and chapter. In the following start object, the default slide from the main chapter is demonstrated first in the e-Detailer:
// ./structure.json"start": {
"slide": "default",
"chapter": "main"
}For more information, see Start.
Style your e-Detailer
You can use CSS to update the look of your e-Detailer. You can change the style of a particular slide in the index.vue file, or you can apply a global style to the whole e-Detailer in the common/styles/main.css file.
For example, an index.vue file with text and an image:
<!-- ./slides/default/index.vue --><i18n>
{
"eng": {
"title": "<span style='line-height:30px;font-size:30px;'>An image</span>"
}
}
</i18n><template>
<wiz-slide>
<wiz-text :text="$t('title')" id="title"></wiz-text>
<div class="image-layout">
<wiz-image :src="defaultImage" class="slide-image"></wiz-image>
</div>
</wiz-slide>
</template><script>
import defaultImage from './media/images/default-image2.png';export default {
data() {
return {
defaultImage,
};
},
};
</script>
<style scoped></style><style scoped editor>
</style>Here's how the slide looks in a browser:
-->
To add CSS styles to the slide:
1) Open the directory of your e-Detailer in an IDE.
2) Go to the slides/default directory. default is the name of the slide subdirectory you want to edit.
3) Open the index.vue file.
4) Add the appropriate CSS styles within the <style> tag. For example:
<!-- ./slides/default/index.vue --><i18n>
{
"eng": {
"title": "An image"
}
}
</i18n><template>
<wiz-slide>
<wiz-text :text="$t('title')" id="title"></wiz-text>
<div class="image-layout">
<wiz-image :src="defaultImage" class="slide-image"></wiz-image>
</div>
</wiz-slide>
</template><script>
import defaultImage from "./media/images/default-image2.png";export default {
data() {
return {
defaultImage,
};
},
};
</script>
<style scoped>
.wiz-slide {
padding: 125px 1.8em 80px;
}
.image-layout {
width: 80%;
margin: auto;
padding: 17px;
height: 77.4%;
box-sizing: border-box;
border: 1px solid #a0a0a0;
}
.wiz-slide >>> .slide-image.wiz-image {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
width: 100%;
height: 100%;
padding: 15px;
box-sizing: border-box;
border: 1.5px dashed rgba(112, 112, 112, 0.27);
}
.wiz-slide >>> .slide-image.wiz-image img {
box-sizing: border-box;
}
</style><style scoped editor></style>To add global styles to the e-Detailer:
1) Open the common/styles directory in an IDE.
2) Edit the main.css file. For example:
• {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
/*-----Common elements-----*/
body {
background: #000;
}
body > .root {
width: 1024px !important;
height: 768px !important;
margin: 0 auto;
}
.blank header,
.blank footer {
height: 0;
opacity: 0;
visibility: hidden;
}
.blank #viewer,
.blank .wiz-slide,
.blank .child-view {
height: 100%;
}
#viewer {
background: #fff;
}
#app,
.root {
height: 100%;
}
.root {
display: flex;
flex-direction: column;
}
.blank .wiz-slide.blank-template {
height: 100%;
margin-top: 0;
}
.wiz-slide {
display: flex;
flex-direction: column;
height: 100%;
min-width: 1024px;
box-sizing: border-box;
}
#title {
margin-left: 15px;
font: normal 30px RobotoLight;
color: #383838;
}
/*-----Header-----*/
#viewer > header {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 115px;
}
#visevenLogo {
align-self: center;
width: 145px;
height: 60px;
margin: 45px auto 0 1.8em;
background: transparent;
}
#indicator {
position: relative;
display: flex;
width: 20%;
}
#indicator .indicators-container {
display: flex;
align-self: center;
margin: auto 55px;
padding: 0;
}
/*-----Footer-----*/
#viewer > footer {
position: absolute;
bottom: 0;
left: 0;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
width: 100%;
height: 77px;
border-bottom: 4px solid #0089d0;
text-align: end;
}
#ewizardLogo {
position: relative;
width: 150px;
height: 37px;
z-index: 2;
margin: 0 50px 30px;
background: transparent;
}
#ewizardLogo.pressed {
background: transparent;
}
#ewizardLogo .wiz-image {
width: 100%;
height: 100%;
}
#sitemap .wiz-sitemap-item.wiz-button {
height: 127px;
background: none;
}
#sitemap .wiz-sitemap-item.active,
#sitemap .wiz-sitemap-chapter.active {
border: none;
overflow: visible;
}
#sitemap .wiz-sitemap-chapter > .wiz-text {
text-align: center;
}
#chapterMenu {
position: absolute;
height: 50px;
z-index: 5;
}
#chapterMenu .move-wrapper {
background: #29b6f6;
}
#chapterMenu .chapter-button {
width: 242px;
transform: translate3d(0, 0, 0);
}
#chapterMenu .chapter-button:first-child {
width: 60px;
}
#chapterMenu .chapter-button:last-of-type {
border-right: 2px solid #55cff4;
}
#chapterMenu.wiz-chapter-menu .chapter-button.active {
padding-top: 0;
border-top: 4px solid #fff;
background: #0288d1;
}
#chapterMenu .chapter-button .wiz-text {
text-align: center;
}
@media(max-width:1024px) {
.child-view .wiz-slide,
#chapterMenu {
max-width: 1024px;
}
}
body {
width: 100%;
height: 100%;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
ul,
ol {
margin: 0;
}
.root {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}
.round-slider-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.round-slider-wrapper .wiz-container.counter {
display: flex;
justify-content: center;
align-items: center;
width: 260px;
height: 260px;
border-radius: 50%;
background: #e6e6e6;
pointer-events: auto;
}
.round-slider-wrapper .counter .wiz-text {
font: 96px/1.2 RobotoCondensed;
color: #0288d1;
}The edited slide looks like this:
-->
Build an e-Detailer
After you finish developing your e-Detailer, you can make a ZIP archive of your project and upload it to the eWizard platform.
To create an archive with a specific name, run:
wiz archive --name [ARCHIVE_NAME]
For example, when you run wiz archive --name edetailer you create an archive named edetailer.
The wiz archive command has multiple options. For more information, see wiz archive [options].
Style your e-Detailer
Use CSS to update the look of your e-Detailer. You can change the style of a particular slide in the index.vue file, or you can apply a global style to the whole e-Detailer in the common/styles/main.css file.
For example, an index.vue file with text and an image:
<!-- ./slides/default/index.vue --><i18n>
{
"eng": {
"title": "<span style='line-height:30px;font-size:30px;'>An image</span>"
}
}
</i18n><template>
<wiz-slide>
<wiz-text :text="$t('title')" id="title"></wiz-text>
<div class="image-layout">
<wiz-image :src="defaultImage" class="slide-image"></wiz-image>
</div>
</wiz-slide>
</template><script>
import defaultImage from './media/images/default-image2.png';export default {
data() {
return {
defaultImage,
};
},
};
</script>
<style scoped></style><style scoped editor>
</style>Here's how the slide looks in a browser:
-->
To add CSS styles to the slide:
1) Open the slide you want to edit: ./slides/default/index.vue where default is the name of your slide.
2) Add the appropriate CSS styles within the <style> tag. For example:
<!-- ./slides/default/index.vue --><i18n>
{
"eng": {
"title": "An image"
}
}
</i18n><template>
<wiz-slide>
<wiz-text :text="$t('title')" id="title"></wiz-text>
<div class="image-layout">
<wiz-image :src="defaultImage" class="slide-image"></wiz-image>
</div>
</wiz-slide>
</template><script>
import defaultImage from "./media/images/default-image2.png";export default {
data() {
return {
defaultImage,
};
},
};
</script>
<style scoped>
.wiz-slide {
padding: 125px 1.8em 80px;
}
.image-layout {
width: 80%;
margin: auto;
padding: 17px;
height: 77.4%;
box-sizing: border-box;
border: 1px solid #a0a0a0;
}
.wiz-slide >>> .slide-image.wiz-image {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
width: 100%;
height: 100%;
padding: 15px;
box-sizing: border-box;
border: 1.5px dashed rgba(112, 112, 112, 0.27);
}
.wiz-slide >>> .slide-image.wiz-image img {
box-sizing: border-box;
}
</style><style scoped editor></style>To add or edit the styles globally on all the slides of the e-Detailer, edit the ./common/styles/main.css file. For example:
• {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
/*-----Common elements-----*/
body {
background: #000;
}
body > .root {
width: 1024px !important;
height: 768px !important;
margin: 0 auto;
}
.blank header,
.blank footer {
height: 0;
opacity: 0;
visibility: hidden;
}
.blank #viewer,
.blank .wiz-slide,
.blank .child-view {
height: 100%;
}
#viewer {
background: #fff;
}
#app,
.root {
height: 100%;
}
.root {
display: flex;
flex-direction: column;
}
.blank .wiz-slide.blank-template {
height: 100%;
margin-top: 0;
}
.wiz-slide {
display: flex;
flex-direction: column;
height: 100%;
min-width: 1024px;
box-sizing: border-box;
}
#title {
margin-left: 15px;
font: normal 30px RobotoLight;
color: #383838;
}
/*-----Header-----*/
#viewer > header {
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 115px;
}
#visevenLogo {
align-self: center;
width: 145px;
height: 60px;
margin: 45px auto 0 1.8em;
background: transparent;
}
#indicator {
position: relative;
display: flex;
width: 20%;
}
#indicator .indicators-container {
display: flex;
align-self: center;
margin: auto 55px;
padding: 0;
}
/*-----Footer-----*/
#viewer > footer {
position: absolute;
bottom: 0;
left: 0;
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
width: 100%;
height: 77px;
border-bottom: 4px solid #0089d0;
text-align: end;
}
#ewizardLogo {
position: relative;
width: 150px;
height: 37px;
z-index: 2;
margin: 0 50px 30px;
background: transparent;
}
#ewizardLogo.pressed {
background: transparent;
}
#ewizardLogo .wiz-image {
width: 100%;
height: 100%;
}
#sitemap .wiz-sitemap-item.wiz-button {
height: 127px;
background: none;
}
#sitemap .wiz-sitemap-item.active,
#sitemap .wiz-sitemap-chapter.active {
border: none;
overflow: visible;
}
#sitemap .wiz-sitemap-chapter > .wiz-text {
text-align: center;
}
#chapterMenu {
position: absolute;
height: 50px;
z-index: 5;
}
#chapterMenu .move-wrapper {
background: #29b6f6;
}
#chapterMenu .chapter-button {
width: 242px;
transform: translate3d(0, 0, 0);
}
#chapterMenu .chapter-button:first-child {
width: 60px;
}
#chapterMenu .chapter-button:last-of-type {
border-right: 2px solid #55cff4;
}
#chapterMenu.wiz-chapter-menu .chapter-button.active {
padding-top: 0;
border-top: 4px solid #fff;
background: #0288d1;
}
#chapterMenu .chapter-button .wiz-text {
text-align: center;
}
@media(max-width:1024px) {
.child-view .wiz-slide,
#chapterMenu {
max-width: 1024px;
}
}
body {
width: 100%;
height: 100%;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
ul,
ol {
margin: 0;
}
.root {
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}
.round-slider-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.round-slider-wrapper .wiz-container.counter {
display: flex;
justify-content: center;
align-items: center;
width: 260px;
height: 260px;
border-radius: 50%;
background: #e6e6e6;
pointer-events: auto;
}
.round-slider-wrapper .counter .wiz-text {
font: 96px/1.2 RobotoCondensed;
color: #0288d1;
}The edited slide looks like this:
-->
Manage video files
When you add video files to your e-Detailer in eWizard Editor, eWizard.js stores them in the following directories of the project directory:
• ./common/media/videos/ if you upload a video file to the e-Detailer in the Master template mode. Also, this directory stores video files for the e-Detailers converted from PPTX presentations.
• ./slides/slide_001/media/videos/ if you add a video file to a specific slide of the e-Detailer.
NOTE: In certain cases, the video files that you delete in eWizard Editor remain in the ./slides/ or ./common/media/videos/ project directories. You can notice this issue by the zipped archive size. To reduce the archive size, remove the unnecessary video files from the required project directory manually.
Video filename
All added video files in eWizard Editor receive new names when stored in the project directory. For example, add the My video.mp4 video file to the video component in eWizard Editor. Open the project directory locally, the video filename changes to the following:
./slides/slide_001/media/videos/682d1750-38be-11ec-a033-2ab36596d197.mp4
To ensure your video files have meaningful names:
1) Change the video filename in the actual video file location.
./slides/slide_001/media/videos/my-video.mp4
2) Change the src path to the video file in the slide index.vue file.
// ./slides/slide_001/index.vue<template> <wiz-slide class="editable-block"> <wiz-video id="wiz-video-c49a" class="default" src="./media/videos/my-video.mp4" data-asset-id="7p2eahdwm1"></wiz-video> </wiz-slide> </template>
3) Build and zip the project.
wiz archive
4) Upload the zipped project to the eWizard platform.
NOTE: When you change the video filenames locally and upload your project to the eWizard platform, eWizard Editor doesn't change the video filenames.