Skip to content

Instantly share code, notes, and snippets.

@Logrythmik
Last active September 23, 2019 15:11
Show Gist options
  • Save Logrythmik/0239cb8f2ad47dbaa2020a1fb3f0d9d2 to your computer and use it in GitHub Desktop.
Save Logrythmik/0239cb8f2ad47dbaa2020a1fb3f0d9d2 to your computer and use it in GitHub Desktop.
kind: Experience
apiVersion: xapi.view.do/v1
metadata:
storyKey: "cdxa-survey"
data:
globalAudio:
- id: "audio1"
name: "Audio 2"
src: "https://storage.googleapis.com/ivx-static/goodsam/gs-esp-dm-purl/audio/survey-default.mp3"
- id: "audio2"
name: "Audio 2"
src: "https://storage.googleapis.com/ivx-static/goodsam/gs-esp-dm-purl/audio/html.mp3"
pageElements:
logo:
src: "https://static.dxp.media/viewdo/demos/qualtrics/images/logo-qualtrics-viewdo-white.png"
alt: "ViewDo Logo"
progress:
active: "false"
tagline:
label: "Get to know us!"
href: "https://view.do"
pane: "footer"
ctas:
persistent:
href: "tel:3038882882"
label: "Give us a call"
type: "phone"
second:
href: "https://view.do"
label: "Explore viewDO"
third:
href: "https://dxp.video/?xid=X6wNGgQqkUiK49NnJXphCw"
label: "Another example"
states:
direct:
title: "CTA Scene"
subtitle: "This is the final scene to direct users out of the experience."
template: "ctas"
thumbnails:
instructions: "Click on the images below to learn more:"
links:
- image: "https://dxp-images.s3.amazonaws.com/story/matts-template-tester/b11be46339f8c31345c3ca5ce33093cf"
label: "Google"
linkType: "url"
link: "http://google.com"
- image: "https://dxp-images.s3.amazonaws.com/story/matts-template-tester/b11be46339f8c31345c3ca5ce33093cf"
label: "Video 2"
linkType: "route"
link: "video2"
- image: "https://dxp-images.s3.amazonaws.com/story/matts-template-tester/b11be46339f8c31345c3ca5ce33093cf"
label: "Video 3"
linkType: "route"
link: "video3"
- image: "https://dxp-images.s3.amazonaws.com/story/matts-template-tester/b11be46339f8c31345c3ca5ce33093cf"
label: "Video 4"
linkType: "route"
link: "video4"
ctas:
instructions: "In the meantime, explore these helpful resources:"
image: "https://static.dxp.media/viewdo/website/images/illustration-what-we-do.png"
persistent:
image: "https://static.dxp.media/viewdo/demos/qualtrics/images/_icons/phone.png"
bullets:
- copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
- copy: "Nullam suscipit libero et ipsum vehicula euismod."
- copy: "Integer tempor eros accumsan mauris blandit fermentum."
second:
image: "https://static.dxp.media/viewdo/demos/qualtrics/images/_icons/explore.png"
bullets:
- copy: "Sed in mauris ac dui volutpat egestas ut vel erat."
- copy: "Integer finibus odio quis nulla euismod fringilla."
- copy: "Ut bibendum elit non consequat aliquam."
third:
image: "https://static.dxp.media/viewdo/demos/qualtrics/images/_icons/computer.png"
bullets:
- copy: "Sed porttitor orci vitae lacinia pretium."
- copy: "In vitae leo quis sem efficitur venenatis sed dictum enim."
- copy: "Cras eget lorem vel velit tempor consequat ut non ligula."
collect:
title: "This is a form to capture user information"
subtitle: "These inputs are auto-generated through the inputs on the platform:"
inputs:
radioOptions:
label: "Preferred contact"
verified:
label: "All good?"
affirm1:
title: "You have reached a custom HTML page (1 of 8)"
subtitle: "Add some content here."
affirm2:
title: "You have reached a custom HTML page (2 of 8)"
subtitle: "Add some content here."
affirm3:
title: "You have reached a custom HTML page (3 of 8)"
subtitle: "Add some content here."
affirm4:
title: "You have reached a custom HTML page (4 of 8)"
subtitle: "Add some content here."
survey1:
title: "How satisfied are you with your existing surveys?"
subtitle: ""
survey2:
title: "What obstacles do you encounter regularly while creating surveys?"
subtitle: "Be as thorough as you'd like!"
survey3:
title: "How long does it typically take to generate new surveys?"
subtitle: ""
survey4:
title: "You have reached a question scene"
subtitle: "Add some content here."
landing:
title: "Thank you for your interest in partnering!"
subtitle: "Explore this short survey to help us understand how we can help."
survey5:
title: "You have reached a question scene"
subtitle: "Add some content here."
video6:
title: "This is a video scene!"
subtitle: "You can add a subtitle too (video6)"
content: "This is an example of content that can appear dynamically under each video (video6)"
next: "survey3"
zoom: "on"
hydrate: true
schemaVersion: "v7"
version: "0.15.3"
title: "CDX-A Survey Template"
trackers:
- id: "viewDOGoogleTagManager"
name: "GTM"
type: "google-tag-manager"
trackingId: "GTM-W88ZV5M"
updated: 1565736055822
image: "https://static.dxp.media/viewdo/demos/qualtrics/images/story-img.jpg"
playerType: "story-player"
description: "This is a POC for a Qualtrics survey"
framework: "basic"
defaultState:
- stateId: "landing"
states:
- id: "landing"
name: "Landing 1"
url: "/landing"
type: "navigation"
next:
- stateId: "survey1"
header:
templateUrl: "[xapi.url]/story/cdxa-survey/template/landingscene.html"
section:
classes: "landing viewdo-html"
links:
- id: "link-1"
route: "survey1"
classes: "viewdo-nav-next"
labelHTML: "./json-html/story/states/landing/links/link-1.html"
onClick:
- eventName: "animateElement"
args:
element: ".landing"
animationClasses: "ivx-animation-fade-out"
- section:
classes: "survey1"
inputs:
- id: "survey1options"
name: "survey1options"
type: "buttons"
buttons: []
attributes:
required: false
name: "Survey 1"
header:
html: "./json-html/story/states/survey1/header.html"
url: "/survey1"
next:
- stateId: "survey2"
onInputReady:
- eventName: "animateElement"
args:
element: ".input-state-container"
animationClasses: "show"
type: "input"
id: "survey1"
- section:
classes: "survey2"
inputs:
- id: "survey2text"
name: "survey2text"
type: "textarea"
attributes:
required: false
name: "Survey 2"
header:
html: "./json-html/story/states/survey2/header.html"
url: "/survey2"
next:
- stateId: "survey3"
onInputReady:
- eventName: "animateElement"
args:
element: ".input-state-container"
animationClasses: "show"
type: "input"
id: "survey2"
- section:
classes: "survey3"
inputs:
- id: "survey3options"
name: "survey3options"
type: "buttons"
buttons: []
attributes:
required: false
name: "Survey 3"
header:
html: "./json-html/story/states/survey3/header.html"
url: "/survey3"
next:
- stateId: "affirm4"
rule:
conditionOperator: "and"
conditions:
- type: "input"
key: "survey3options"
is: "equals"
value: "option4"
- stateId: "affirm3"
rule:
conditionOperator: "and"
conditions:
- type: "input"
key: "survey3options"
is: "equals"
value: "option3"
- stateId: "affirm2"
rule:
conditionOperator: "and"
conditions:
- type: "input"
key: "survey3options"
is: "equals"
value: "option2"
- stateId: "affirm1"
onInputReady:
- eventName: "animateElement"
args:
element: ".input-state-container"
animationClasses: "show"
type: "input"
id: "survey3"
- section:
classes: "survey4"
inputs:
- id: "survey4options"
name: "survey4options"
type: "buttons"
buttons:
- value: "option1"
label: "Option 1"
- value: "option2"
label: "Option 2"
- value: "option3"
label: "Option 3"
- value: "option4"
label: "Option 4"
- value: "option5"
label: "Option 5"
- value: "option6"
label: "Option 6"
- value: "option7"
label: "Option 7"
- value: "option8"
label: "Option 8"
attributes:
required: false
name: "Survey 4"
header:
html: "./json-html/story/states/survey4/header.html"
url: "/survey4"
next:
- stateId: "survey5"
onInputReady:
- eventName: "animateElement"
args:
element: ".input-state-container"
animationClasses: "show"
type: "input"
id: "survey4"
- section:
classes: "survey5"
inputs:
- id: "survey5options"
name: "survey5options"
type: "buttons"
buttons:
- value: "option1"
label: "Option 1"
- value: "option2"
label: "Option 2"
- value: "option3"
label: "Option 3"
- value: "option4"
label: "Option 4"
- value: "option5"
label: "Option 5"
- value: "option6"
label: "Option 6"
- value: "option7"
label: "Option 7"
- value: "option8"
label: "Option 8"
attributes:
required: false
name: "Survey 5"
header:
html: "./json-html/story/states/survey5/header.html"
url: "/survey5"
next:
- stateId: "collect"
onInputReady:
- eventName: "animateElement"
args:
element: ".input-state-container"
animationClasses: "show"
type: "input"
id: "survey5"
- id: "affirm1"
name: "Affirm 1"
url: "/affirm1"
type: "navigation"
next:
- stateId: "survey4"
header:
templateUrl: "[xapi.url]/story/cdxa-survey/template/htmlscene1.html"
section:
classes: "affirm1 viewdo-html"
links:
- id: "link-1"
route: "survey3"
classes: "viewdo-nav-back"
labelHTML: "./json-html/story/states/affirm1/links/link-1.html"
onClick:
- eventName: "animateElement"
args:
element: ".affirm1"
animationClasses: "ivx-animation-fade-out"
- id: "link-2"
route: "collect"
classes: "viewdo-nav-next"
labelHTML: "./json-html/story/states/affirm1/links/link-2.html"
onClick:
- eventName: "animateElement"
args:
element: ".affirm1"
animationClasses: "ivx-animation-fade-out"
- id: "affirm2"
name: "Affirm 2"
url: "/affirm2"
type: "navigation"
next:
- stateId: "survey4"
header:
templateUrl: "[xapi.url]/story/cdxa-survey/template/htmlscene2.html"
section:
classes: "affirm2"
links:
- id: "link-1"
route: "survey3"
classes: "viewdo-nav-back"
labelHTML: "./json-html/story/states/affirm2/links/link-1.html"
onClick:
- eventName: "animateElement"
args:
element: ".affirm2"
animationClasses: "ivx-animation-fade-out"
- id: "link-2"
route: "collect"
classes: "viewdo-nav-next"
labelHTML: "./json-html/story/states/affirm2/links/link-2.html"
onClick:
- eventName: "animateElement"
args:
element: ".affirm2"
animationClasses: "ivx-animation-fade-out"
- id: "affirm3"
name: "Affirm 3"
url: "/affirm3"
type: "navigation"
next:
- stateId: "survey4"
header:
templateUrl: "[xapi.url]/story/cdxa-survey/template/htmlscene3.html"
section:
classes: "affirm3"
links:
- id: "link-1"
route: "survey3"
classes: "viewdo-nav-back"
labelHTML: "./json-html/story/states/affirm3/links/link-1.html"
onClick:
- eventName: "animateElement"
args:
element: ".affirm3"
animationClasses: "ivx-animation-fade-out"
- id: "link-2"
route: "collect"
classes: "viewdo-nav-next"
labelHTML: "./json-html/story/states/affirm3/links/link-2.html"
onClick:
- eventName: "animateElement"
args:
element: ".affirm3"
animationClasses: "ivx-animation-fade-out"
- id: "affirm4"
name: "Affirm 4"
url: "/affirm4"
type: "navigation"
next:
- stateId: "survey4"
header:
templateUrl: "[xapi.url]/story/cdxa-survey/template/htmlscene4.html"
section:
classes: "affirm4"
links:
- id: "link-1"
route: "survey3"
classes: "viewdo-nav-back"
labelHTML: "./json-html/story/states/affirm4/links/link-1.html"
onClick:
- eventName: "animateElement"
args:
element: ".affirm4"
animationClasses: "ivx-animation-fade-out"
- id: "link-2"
route: "collect"
classes: "viewdo-nav-next"
labelHTML: "./json-html/story/states/affirm4/links/link-2.html"
onClick:
- eventName: "animateElement"
args:
element: ".affirm4"
animationClasses: "ivx-animation-fade-out"
- section:
classes: "collect"
inputs:
- id: "firstname"
name: "firstname"
labelHTML: "./json-html/story/states/collect/inputs/firstname.html"
type: "text"
attributes:
required: true
maxlength: 64
minlength: 0
settings:
width: "1/2"
- id: "lastname"
name: "lastname"
labelHTML: "./json-html/story/states/collect/inputs/lastname.html"
type: "text"
attributes:
required: true
maxlength: 64
minlength: 0
settings:
width: "1/2"
- id: "email"
name: "email"
labelHTML: "./json-html/story/states/collect/inputs/email.html"
type: "email"
attributes:
required: true
settings:
width: "1/2"
- id: "phone"
name: "phone"
labelHTML: "./json-html/story/states/collect/inputs/phone.html"
type: "text"
settings:
width: "1/2"
- id: "consented"
name: "consented"
labelHTML: "./json-html/story/states/collect/inputs/consented.html"
type: "checkbox"
attributes:
required: true
settings:
input:
classes: "pull-left"
name: "Collect"
header:
html: "./json-html/story/states/collect/header.html"
url: "/collect"
next:
- stateId: "direct"
onSubmit:
- eventName: "recordEvent"
args:
customEvent: "submitted-form"
- eventName: "setMilestone"
args:
milestone: "Submitted Form"
onInputReady:
- eventName: "animateElement"
args:
element: ".input-state-container"
animationClasses: "show"
type: "input"
id: "collect"
- section:
classes: "direct direct-template-{{experience.data.states.direct.template}}"
onLinksReady:
- eventName: "animateElement"
args:
element: ".navigation-state-container"
animationClasses: "show"
name: "Direct"
header:
templateUrl: "[xapi.url]/story/cdxa-survey/template/ctasceneheader.html"
url: "/direct"
onEnter:
- eventName: "setCompleted"
links:
- id: "direct-link-1"
href: "{{experience.data.ctas.persistent.href}}"
classes: "ivx-input-buttons ivx-input-buttons-cta-persistent"
attributes:
target: "_blank"
labelHTML: "./json-html/story/states/direct/links/direct-link-1.html"
pane: "footer"
onClick:
- eventName: "recordEvent"
args:
customEvent: "clicked-persistent-cta"
- eventName: "setConverted"
args:
label: "{{experience.data.ctas.persistent.label}}"
- id: "direct-link-2"
href: "{{experience.data.ctas.second.href}}"
classes: "ivx-input-buttons ivx-input-buttons-cta"
attributes:
target: "_blank"
labelHTML: "./json-html/story/states/direct/links/direct-link-2.html"
pane: "footer"
onClick:
- eventName: "recordEvent"
args:
customEvent: "clicked-second-cta"
- eventName: "setConverted"
args:
label: "{{experience.data.ctas.second.label}}"
- id: "direct-link-3"
href: "{{experience.data.ctas.third.href}}"
classes: "ivx-input-buttons ivx-input-buttons-cta"
attributes:
target: "_blank"
labelHTML: "./json-html/story/states/direct/links/direct-link-3.html"
pane: "footer"
onClick:
- eventName: "recordEvent"
args:
customEvent: "clicked-third-cta"
- eventName: "setConverted"
args:
label: "{{experience.data.ctas.third.label}}"
type: "navigation"
id: "direct"
footer:
templateUrl: "[xapi.url]/story/cdxa-survey/template/ctascenefooter.html"
selector: "#state-player"
pageElements:
- type: "html"
html: "./json-html/story/pageElements/header-progress.html"
id: "header-progress"
pane: "header"
- type: "image"
src: "{{experience.data.pageElements.logo.src}}"
id: "logo"
pane: "header"
- type: "html"
html: "./json-html/story/pageElements/header-background.html"
id: "header-background"
pane: "header"
- type: "html"
html: "./json-html/story/pageElements/header-tagline.html"
id: "header-tagline"
pane: "header"
onClick:
- eventName: "recordEvent"
args:
customEvent: "clicked-tagline"
- eventName: "setConverted"
args:
label: "{{experience.data.tagline.label}}"
- hideOn:
- route: "direct"
classes: "ivx-input-buttons ivx-input-buttons-cta-persistent"
pane: "footer"
onClick:
- eventName: "recordEvent"
args:
customEvent: "clicked-cta-persistent"
- eventName: "setConverted"
args:
label: "{{experience.data.ctas.persistent.label}}"
href: "{{experience.data.ctas.persistent.href}}"
attributes:
target: "_blank"
type: "cta-link"
id: "footer-persistent"
labelHTML: "./json-html/story/pageElements/footer-persistent.html"
- type: "html"
html: "./json-html/story/pageElements/footer-tagline.html"
id: "footer-tagline"
pane: "footer"
onClick:
- eventName: "recordEvent"
args:
customEvent: "clicked-tagline"
- eventName: "setConverted"
args:
label: "{{experience.data.tagline.label}}"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment