https://is-template-guide.herokuapp.com/en/assets/js/dc88881c.9059ada4.js

1"use strict";(self.webpackChunkpersonalization_guide=self.webpackChunkpersonalization_guide||[]).push([[7493],{3905:(t,e,a)=>{a.d(e,{Zo:()=>m,kt:()=>u});var n=a(7294);function r(t,e,a){return e in t?Object.defineProperty(t,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[e]=a,t}function l(t,e){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),a.push.apply(a,n)}return a}function i(t){for(var e=1;e<arguments.length;e++){var a=null!=arguments[e]?arguments[e]:{};e%2?l(Object(a),!0).forEach((function(e){r(t,e,a[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))}))}return t}function o(t,e){if(null==t)return{};var a,n,r=function(t,e){if(null==t)return{};var a,n,r={},l=Object.keys(t);for(n=0;n<l.length;n++)a=l[n],e.indexOf(a)>=0||(r[a]=t[a]);return r}(t,e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(n=0;n<l.length;n++)a=l[n],e.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(t,a)&&(r[a]=t[a])}return r}var d=n.createContext({}),p=function(t){var e=n.useContext(d),a=e;return t&&(a="function"==typeof t?t(e):i(i({},e),t)),a},m=function(t){var e=p(t.components);return n.createElement(d.Provider,{value:e},t.children)},k="mdxType",N={inlineCode:"code",wrapper:function(t){var e=t.children;return n.createElement(n.Fragment,{},e)}},g=n.forwardRef((function(t,e){var a=t.components,r=t.mdxType,l=t.originalType,d=t.parentName,m=o(t,["components","mdxType","originalType","parentName"]),k=p(a),g=r,u=k["".concat(d,".").concat(g)]||k[g]||N[g]||l;return a?n.createElement(u,i(i({ref:e},m),{},{components:a})):n.createElement(u,i({ref:e},m))}));function u(t,e){var a=arguments,r=e&&e.mdxType;if("string"==typeof t||r){var l=a.length,i=new Array(l);i[0]=g;var o={};for(var d in e)hasOwnProperty.call(e,d)&&(o[d]=e[d]);o.originalType=t,o[k]="string"==typeof t?t:r,i[1]=o;for(var p=2;p<l;p++)i[p]=a[p];return n.createElement.apply(null,i)}return n.createElement.apply(null,a)}g.displayName="MDXCreateElement"},8560:(t,e,a)=>{a.r(e),a.d(e,{assets:()=>d,contentTitle:()=>i,default:()=>N,frontMatter:()=>l,metadata:()=>o,toc:()=>p});var n=a(7462),r=(a(7294),a(3905));const l={id:"banner-02",sidebar:"sidebarSetUp"},i="Banner 02",o={unversionedId:"set-up/banner-02",id:"set-up/banner-02",title:"Banner 02",description:"Preview",source:"@site/i18n/en/docusaurus-plugin-content-docs/current/set-up/banner-02.md",sourceDirName:"set-up",slug:"/set-up/banner-02",permalink:"/en/set-up/banner-02",draft:!1,tags:[],version:"current",frontMatter:{id:"banner-02",sidebar:"sidebarSetUp"},sidebar:"sidebarSetUp",previous:{title:"Banner 01",permalink:"/en/set-up/banner-01"},next:{title:"Banner 03",permalink:"/en/set-up/banner-03"}},d={},p=[{value:"Preview",id:"preview",level:3},{value:"Trigger",id:"trigger",level:3},{value:"Position/Scroll",id:"positionscroll",level:3},{value:"Position",id:"position",level:4},{value:"Scroll",id:"scroll",level:4},{value:"Appearance",id:"appearance",level:3},{value:"Content: Image",id:"content-image",level:3},{value:"Content: Text",id:"content-text",level:3},{value:"Content: Button 1",id:"content-button-1",level:3},{value:"Content: Button 2",id:"content-button-2",level:3},{value:"Content Zone",id:"content-zone",level:3}],m={toc:p},k="wrapper";function N(t){let{components:e,...a}=t;return(0,r.kt)(k,(0,n.Z)({},m,a,{components:e,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"banner-02"},"Banner 02"),(0,r.kt)("h3",{id:"preview"},"Preview"),(0,r.kt)("video",{width:"100%",controls:!0},(0,r.kt)("source",{src:"/en/movie/en-banner-02.mp4",type:"video/mp4"})),(0,r.kt)("h3",{id:"trigger"},"Trigger"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Trigger Type"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Detail"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"DOM Ready")),(0,r.kt)("td",{parentName:"tr",align:"left"},"When all the HTML has been received and parsed by the browser into the DOM tree.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Exit")),(0,r.kt)("td",{parentName:"tr",align:"left"},"When the cursor leaves the bounds of the body from the top of the page.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Inactive")),(0,r.kt)("td",{parentName:"tr",align:"left"},"When no user activity within the document after the configured milliseconds.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Scroll")),(0,r.kt)("td",{parentName:"tr",align:"left"},"When the scroll amount goes beyond the provided value of the page height.")))),(0,r.kt)("p",null,"*","While Interaction Studio web templates are based on responsive HTML that supports displaying web campaigns on mobile devices, ",(0,r.kt)("inlineCode",{parentName:"p"},"EXIT")," does not work on mobile devices since it depends on listening for mouse move events on a page."),(0,r.kt)("h3",{id:"positionscroll"},"Position/Scroll"),(0,r.kt)("h4",{id:"position"},"Position"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Vertical Position"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"TOP")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("div",{className:"bannerContainer alignTop"},(0,r.kt)("div",null)))),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"BOTTOM")),(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("div",{className:"bannerContainer alignBottom"},(0,r.kt)("div",null)))))),(0,r.kt)("h4",{id:"scroll"},"Scroll"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Detail"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Fixed")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Click the close button to hide from the page")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Hide with Scroll")),(0,r.kt)("td",{parentName:"tr",align:"left"},"The element will be hidden after page is scrolled")))),(0,r.kt)("h3",{id:"appearance"},"Appearance"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Detail"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"}

1,"Banner Background Color")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Color of Closing Button")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Banner Border Color")),(0,r.kt)("td",{parentName:"tr",align:"left"},"To show border, the width needs to be set more than 1px")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Banner Border Width")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Banner Inner Spacing")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Distance between Inner Elements")),(0,r.kt)("td",{parentName:"tr",align:"left"},"The gap between the each element in popup")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Horizontal Alignment")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Vertical Alignment")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")))),(0,r.kt)("h3",{id:"content-image"},"Content: Image"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Detail"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Image URL")),(0,r.kt)("td",{parentName:"tr",align:"left"},"URL or BASE 64 format.",(0,r.kt)("br",null)," We recommend the original width of the image is over 280px to prevent the image pixelated.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Image Width")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Minimun width is 80px")))),(0,r.kt)("h3",{id:"content-text"}

1,"Content: Text"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Detail"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Title Text")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Please avoid to add a url in the text. Since the parent is wrapped with ",(0,r.kt)("inlineCode",{parentName:"td"},"<a>")," as default, adding url would break the layout.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Title Font Size")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Title Color")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Body Text")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Please avoid to add a url in the text. Since the parent is wrapped with ",(0,r.kt)("inlineCode",{parentName:"td"},"<a>")," as default, adding url would break the layout.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Body Font Size")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Body Color")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")))),(0,r.kt)("h3",{id:"content-button-1"},"Content: Button 1"),(0,r.kt)("p",null,"The ",(0,r.kt)("strong",{parentName:"p"},"left bottom")," button inside the popup"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Detail"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Link URL")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Button Text")),(0,r.kt)("td",{parentName:"tr",align:"left"},"Please avoid to add a url in the text. Since this element is wrapped with ",(0,r.kt)("inlineCode",{parentName:"td"},"<a>")," as default, adding url would break the layout.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Button Font Size")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Button Text Color")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Button Border Radius")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Button Background Color")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")))),(0,r.kt)("h3",{id:"content-button-2"},"Content: Button 2"),(0,r.kt)("p",null,"The ",(0,r.kt)("strong",{parentName:"p"},"right bottom")," button inside the popup"),(0,r.kt)("table",null,(0,r.kt)("thead",{parentName:"table"},(0,r.kt)("tr",{parentName:"thead"},(0,r.kt)("th",{parentName:"tr",align:"left"},"Name"),(0,r.kt)("th",{parentName:"tr",align:"left"},"Detail"))),(0,r.kt)("tbody",{parentName:"table"},(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Link URL")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Button Text")),(0,r.kt)("td",{parentName:"tr",align:"left"}

1,"Please avoid to add a url in the text. Since this element is wrapped with ",(0,r.kt)("inlineCode",{parentName:"td"},"<a>")," as default, adding url would break the layout.")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Button Font Size")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Button Text Color")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Button Border Radius")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")),(0,r.kt)("tr",{parentName:"tbody"},(0,r.kt)("td",{parentName:"tr",align:"left"},(0,r.kt)("inlineCode",{parentName:"td"},"Button Background Color")),(0,r.kt)("td",{parentName:"tr",align:"left"},"\u2013")))),(0,r.kt)("h3",{id:"content-zone"},"Content Zone"),(0,r.kt)("p",null,"Not required"))}N.isMDXComponent=!0}}]);