├── .nvmrc
├── public
    ├── _redirects
    ├── favicon.ico
    └── index.html
├── babel.config.js
├── src
    ├── assets
    │   └── logo.png
    ├── vue-email-editor.ts
    ├── shims-vue.d.ts
    ├── main.ts
    ├── components
    │   ├── loadScript.ts
    │   ├── types.ts
    │   └── EmailEditor.vue
    ├── views
    │   └── Example.vue
    └── data
    │   └── sample.json
├── prettier.config.js
├── vue.config.js
├── .gitignore
├── tsconfig.json
├── vite.config.ts
├── package.json
└── README.md


/.nvmrc:
--------------------------------------------------------------------------------
1 | v20.15.0


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /*  /index.html 200


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['@vue/cli-plugin-babel/preset'],
3 | };
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unlayer/vue-email-editor/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unlayer/vue-email-editor/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/vue-email-editor.ts:
--------------------------------------------------------------------------------
1 | import EmailEditor from './components/EmailEditor.vue';
2 | export { EmailEditor };
3 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   singleQuote: true,
3 |   arrowParens: 'always',
4 |   trailingComma: 'es5',
5 | };
6 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service');
2 | module.exports = defineConfig({
3 |   transpileDependencies: true,
4 | });
5 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | declare module '*.vue' {
3 |   import type { DefineComponent } from 'vue'
4 |   const component: DefineComponent<{}, {}, any>
5 |   export default component
6 | }
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | // @ts-ignore
 2 | import { createApp } from 'vue/dist/vue.esm-bundler.js';
 3 | import { createRouter, createWebHistory } from 'vue-router';
 4 | 
 5 | import Example from './views/Example.vue';
 6 | 
 7 | const routes = [
 8 |   { path: '/', component: Example },
 9 | ];
10 | 
11 | const router = createRouter({
12 |   history: createWebHistory(),
13 |   routes,
14 | });
15 | 
16 | const app = createApp({});
17 | 
18 | app.use(router);
19 | app.mount('#app');
20 | 
21 | export default app;
22 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowJs": true,
 4 |     "target": "ESNext",
 5 |     "module": "ESNext",
 6 |     "moduleResolution": "node",
 7 |     "lib": ["ESNext", "DOM"],
 8 |     "strict": true,
 9 |     "declaration": true,
10 |     "declarationDir": "./dist",
11 |     "emitDeclarationOnly": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "esModuleInterop": true,
14 |     "experimentalDecorators": true,
15 |     "resolveJsonModule": true,
16 |     "skipLibCheck": true,
17 |   },
18 |   "include": [
19 |     "src/*",
20 |     "src/components/*",
21 |     "src/vue-email-editor.ts",
22 |     "node_modules/unlayer-types/embed.d.ts"
23 |   ],
24 | }


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-email-editor</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-email-editor doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app">
15 |       <router-view></router-view>
16 |     </div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | // vite.config.js
 2 | import { defineConfig } from 'vite'
 3 | import vue from '@vitejs/plugin-vue'
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [vue()],
 7 |   build: {
 8 |     lib: {
 9 |       entry: './src/vue-email-editor.ts', // Your entry file
10 |       name: 'vue-email-editor', // Your library's name
11 |       fileName: (format) => `vue-email-editor.${format}.js`
12 |     },
13 |     rollupOptions: {
14 |       // Make sure to externalize deps that shouldn't be bundled
15 |       // into your library
16 |       external: ['vue'],
17 |       output: {
18 |         // Provide global variables to use in the UMD build
19 |         // for externalized deps
20 |         globals: {
21 |           vue: 'Vue'
22 |         }
23 |       }
24 |     }
25 |   }
26 | })


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-email-editor",
 3 |   "version": "2.1.5",
 4 |   "main": "dist/vue-email-editor.es",
 5 |   "types": "dist/vue-email-editor.d.ts",
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "lint": "vue-cli-service lint",
10 |     "adjust-types": "sed -i '' '1s/^/\\/\\/\\/ <reference types=\\\"unlayer-types\\/embed.d.ts\\\" \\/>\\n/' ./dist/components/types.d.ts",
11 |     "build-types": "vue-tsc --emitDeclarationOnly && npm run adjust-types",
12 |     "build-bundle": "vite build && cd ./src/components && npm run build-types",
13 |     "release": "npm run build-bundle && npm publish"
14 |   },
15 |   "dependencies": {
16 |     "unlayer-types": "latest",
17 |     "vue": "^3.2.13"
18 |   },
19 |   "devDependencies": {
20 |     "@babel/types": "^7.24.7",
21 |     "@vitejs/plugin-vue": "^5.0.5",
22 |     "@vue/cli-plugin-typescript": "~5.0.0",
23 |     "@vue/cli-service": "~5.0.0",
24 |     "typescript": "^5.2.2",
25 |     "vite": "^5.3.1",
26 |     "vue-dts-gen": "^0.3.0",
27 |     "vue-loader": "^17.4.2",
28 |     "vue-router": "^4.4.0",
29 |     "vue-template-compiler": "^2.7.16",
30 |     "vue-tsc": "^2.0.22"
31 |   },
32 |   "files": [
33 |     "dist"
34 |   ]
35 | }
36 | 


--------------------------------------------------------------------------------
/src/components/loadScript.ts:
--------------------------------------------------------------------------------
 1 | const defaultScriptUrl = 'https://editor.unlayer.com/embed.js?2';
 2 | const callbacks: Function[] = [];
 3 | let loaded = false;
 4 | 
 5 | const isScriptInjected = (scriptUrl: string) => {
 6 |   const scripts = document.querySelectorAll('script');
 7 |   let injected = false;
 8 | 
 9 |   scripts.forEach((script) => {
10 |     if (script.src.includes(scriptUrl)) {
11 |       injected = true;
12 |     }
13 |   });
14 | 
15 |   return injected;
16 | };
17 | 
18 | const addCallback = (callback: Function) => {
19 |   callbacks.push(callback);
20 | };
21 | 
22 | const runCallbacks = () => {
23 |   if (loaded) {
24 |     let callback;
25 | 
26 |     while ((callback = callbacks.shift())) {
27 |       callback();
28 |     }
29 |   }
30 | };
31 | 
32 | export const loadScript = (
33 |   callback: Function,
34 |   scriptUrl = defaultScriptUrl
35 | ) => {
36 |   addCallback(callback);
37 | 
38 |   if (!isScriptInjected(scriptUrl)) {
39 |     const embedScript = document.createElement('script');
40 |     embedScript.setAttribute('src', scriptUrl);
41 |     embedScript.onload = () => {
42 |       loaded = true;
43 |       runCallbacks();
44 |     };
45 |     document.head.appendChild(embedScript);
46 |   } else {
47 |     runCallbacks();
48 |   }
49 | };
50 | 


--------------------------------------------------------------------------------
/src/components/types.ts:
--------------------------------------------------------------------------------
 1 | // ignore next line
 2 | /// <reference types="unlayer-types/embed.d.ts" />
 3 | 
 4 | import Embed from 'embed/index';
 5 | import { Editor as EditorClass } from 'embed/Editor';
 6 | import { Config } from "embed/Config";
 7 | import { AppearanceConfig, DisplayMode, ToolsConfig } from 'state/types/types';
 8 | 
 9 | export type Unlayer = typeof Embed;
10 | export type Editor = InstanceType<typeof EditorClass>;
11 | 
12 | export interface EmailEditorProps {
13 |   editor: Editor | null;
14 |   editorId?: string | undefined;
15 |   minHeight?: number | string | undefined;
16 |   options?: Config;
17 |   scriptUrl: string;
18 | 
19 |   // redundant props -- already available in options
20 |   /** @deprecated */
21 |   appearance?: AppearanceConfig | undefined;
22 |   /** @deprecated */
23 |   displayMode?: DisplayMode;
24 |   /** @deprecated */
25 |   locale?: string | undefined;
26 |   /** @deprecated */
27 |   projectId?: number | undefined;
28 |   /** @deprecated */
29 |   tools?: ToolsConfig | undefined;
30 | 
31 |   /** @deprecated */
32 |   exportHtml: Editor['exportHtml'];
33 |   /** @deprecated */
34 |   loadDesign: Editor['loadDesign'];
35 |   /** @deprecated */
36 |   saveDesign: Editor['saveDesign'];
37 | }
38 | 
39 | declare global {
40 |   const unlayer: Unlayer;
41 | 
42 |   interface Window {
43 |     __unlayer_lastEditorId: number;
44 |   }
45 | }


--------------------------------------------------------------------------------
/src/views/Example.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="example">
  3 |     <div class="container">
  4 |       <div id="bar">
  5 |         <h1>Vue Email Editor (Demo)</h1>
  6 | 
  7 |         <button v-on:click="saveDesign">Save Design</button>
  8 |         <button v-on:click="exportHtml">Export HTML</button>
  9 |       </div>
 10 | 
 11 |       <EmailEditor ref="emailEditor" v-on:load="editorLoaded" v-on:ready="editorReady" :options="options" />
 12 |     </div>
 13 |   </div>
 14 | </template>
 15 | 
 16 | <script lang="ts">
 17 | import { defineComponent } from 'vue';
 18 | import { EmailEditor } from '../vue-email-editor';
 19 | import sample from '../data/sample.json';
 20 | 
 21 | type EmailEditorInstance = InstanceType<typeof EmailEditor>;
 22 | export default defineComponent({
 23 |   name: 'exampleView',
 24 |   components: {
 25 |     EmailEditor
 26 |   },
 27 |   data() {
 28 |     return {
 29 |       emailEditor: null as EmailEditorInstance | null,
 30 |       options: {
 31 |         appearance: {
 32 |           theme: 'modern_light',
 33 |         },
 34 |         version: 'latest',
 35 |       }
 36 |     }
 37 |   },
 38 |   mounted() {
 39 |     // Assign the ref with a type assertion
 40 |     this.emailEditor = this.$refs.emailEditor as EmailEditorInstance;
 41 |   },
 42 |   methods: {
 43 |     // called when the editor is created
 44 |     editorLoaded() {
 45 |       this?.emailEditor?.editor?.loadDesign(sample)
 46 |     },
 47 |     // called when the editor has finished loading
 48 |     editorReady() {
 49 |       console.log('editorReady');
 50 |     },
 51 |     saveDesign() {
 52 |       this.emailEditor?.editor?.saveDesign(
 53 |         (design: any) => {
 54 |           console.log('saveDesign', design);
 55 |         }
 56 |       )
 57 |     },
 58 |     exportHtml() {
 59 |       this?.emailEditor?.editor?.exportHtml(
 60 |         (data: any) => {
 61 |           console.log('exportHtml', data);
 62 |         }
 63 |       )
 64 |     }
 65 |   }
 66 | })
 67 | </script>
 68 | 
 69 | <style>
 70 | html, body {
 71 |   margin: 0;
 72 |   padding: 0;
 73 |   height: 100%;
 74 |   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 75 | }
 76 | 
 77 | #app, #example {
 78 |   height: 100%;
 79 | }
 80 | 
 81 | #example .container {
 82 |   display: flex;
 83 |   flex-direction: column;
 84 |   position: relative;
 85 |   height: 100%;
 86 | }
 87 | 
 88 | #bar {
 89 |   flex: 1;
 90 |   background-color: #40B883;
 91 |   color: #FFF;
 92 |   padding: 10px;
 93 |   display: flex;
 94 |   max-height: 40px;
 95 | }
 96 | 
 97 | #bar h1 {
 98 |   flex: 1;
 99 |   font-size: 16px;
100 |   text-align: left;
101 | }
102 | 
103 | #bar button {
104 |   flex: 1;
105 |   padding: 10px;
106 |   margin-left: 10px;
107 |   font-size: 14px;
108 |   font-weight: bold;
109 |   background-color: #000;
110 |   color: #FFF;
111 |   border: 0px;
112 |   max-width: 150px;
113 |   cursor: pointer;
114 | }
115 | </style>
116 | 


--------------------------------------------------------------------------------
/src/components/EmailEditor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     v-bind:id="id"
  4 |     class="unlayer-editor"
  5 |     v-bind:style="{ minHeight: minHeight }"
  6 |   ></div>
  7 | </template>
  8 | 
  9 | <script lang="ts">
 10 | import { defineComponent, shallowRef, toRaw } from 'vue';
 11 | import pkg from '../../package.json';
 12 | import { loadScript } from './loadScript';
 13 | import { EmailEditorProps } from './types';
 14 | let lastEditorId = 0;
 15 | 
 16 | export default defineComponent({
 17 |   name: 'EmailEditor',
 18 |   props: {
 19 |     editorId: String as () => EmailEditorProps['editorId'],
 20 |     minHeight: {
 21 |       type: String as () => EmailEditorProps['minHeight'],
 22 |       default: '500px',
 23 |     },
 24 |     options: {
 25 |       type: Object as () => EmailEditorProps['options'],
 26 |       default: () => ({}),
 27 |     },
 28 |     scriptUrl: String as () => EmailEditorProps['scriptUrl'],
 29 | 
 30 |     /**
 31 |      * @Deprecated Props: Use `options.appearance` instead
 32 |      */
 33 |     appearance: Object as () => EmailEditorProps['appearance'],
 34 |      /**
 35 |      * @Deprecated Props: Use `options.locale` instead
 36 |      */
 37 |     locale: String as () => EmailEditorProps['locale'],
 38 |      /**
 39 |      * @Deprecated Props: Use `options.projectId` instead
 40 |      */
 41 |     projectId: Number as () => EmailEditorProps['projectId'],
 42 |      /**
 43 |      * @Deprecated Props: Use `options.tools` instead
 44 |      */
 45 |     tools: Object as () => EmailEditorProps['tools'],
 46 |   },
 47 |   computed: {
 48 |     id(): string | undefined {
 49 |       return this.editorId || `editor-${++lastEditorId}`;
 50 |     },
 51 |   },
 52 |   setup() {
 53 |     const editor = shallowRef<EmailEditorProps['editor'] | null>(null);
 54 | 
 55 |     const createSerializedEditor = (originalEditor: any) => {
 56 |       if (!originalEditor) return null;
 57 |       
 58 |       return {
 59 |         ...originalEditor,
 60 |         registerCallback: (event: string, callback: Function) => {
 61 |           originalEditor.registerCallback(event, (data: any, done: Function) => {
 62 |             callback(data, (result: any) => {
 63 |               const rawResult = toRaw(result);
 64 |               done(rawResult);
 65 |             });
 66 |           });
 67 |         }
 68 |       };
 69 |     };
 70 | 
 71 |     return {
 72 |       editor,
 73 |       createSerializedEditor,
 74 |     };
 75 |   },
 76 |   mounted() {
 77 |     loadScript(this.loadEditor.bind(this), this.scriptUrl);
 78 |   },
 79 |   methods: {
 80 |     loadEditor() {
 81 |       const options = toRaw(this.options) || {};
 82 | 
 83 |       if (this.appearance) {
 84 |         options.appearance = toRaw(this.appearance);
 85 |       }
 86 | 
 87 |       if (this.locale) {
 88 |         options.locale = this.locale;
 89 |       }
 90 | 
 91 |       if (this.projectId) {
 92 |         options.projectId = this.projectId;
 93 |       }
 94 | 
 95 |       if (this.tools) {
 96 |         options.tools = toRaw(this.tools);
 97 |       }
 98 | 
 99 |       const rawEditor = unlayer.createEditor({
100 |         ...options,
101 |         id: this.id,
102 |         source: {
103 |           name: pkg.name,
104 |           version: pkg.version,
105 |         },
106 |       });
107 | 
108 |       // Wrap the editor with serialization handling
109 |       this.editor = this.createSerializedEditor(rawEditor);
110 | 
111 |       this.$emit('load');
112 |       this.editor?.addEventListener('editor:ready', () => {
113 |         this.$emit('ready');
114 |       });
115 |     },
116 |     /**
117 |      * @deprecated This method will be removed in the next major release. Use `editor.exportHtml` instead.
118 |      */
119 |      exportHtml(callback: Parameters<EmailEditorProps['exportHtml']>[0]) {
120 |       this.editor?.exportHtml(callback);
121 |     },
122 |     /**
123 |      * @deprecated This method will be removed in the next major release. Use `editor.loadDesign` instead.
124 |      */
125 |     loadDesign(design: Parameters<EmailEditorProps['loadDesign']>[0]) {
126 |       this.editor?.loadDesign(design);
127 |     },
128 |      /**
129 |      * @deprecated This method will be removed in the next major release. Use `editor.saveDesign` instead.
130 |      */
131 |     saveDesign(callback: Parameters<EmailEditorProps['saveDesign']>[0]) {
132 |       this.editor?.saveDesign(callback)
133 |     }
134 |   },
135 | });
136 | </script>
137 | 
138 | <style scoped>
139 | .unlayer-editor {
140 |   flex: 1;
141 |   display: flex;
142 | }
143 | </style>
144 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue Email Editor
  2 | 
  3 | The excellent drag-n-drop email editor by [Unlayer](https://unlayer.com/embed) as a [Vue](https://vuejs.org/) _wrapper component_. This is the most powerful and developer friendly visual email builder for your app.
  4 | 
  5 | |                                                         Video Overview                                                          |
  6 | | :-----------------------------------------------------------------------------------------------------------------------------: |
  7 | | [![Vue Email Editor](https://unroll-assets.s3.amazonaws.com/unlayervideotour.png)](https://www.youtube.com/watch?v=MIWhX-NF3j8) |
  8 | |                                      _Watch video overview: https://youtu.be/MIWhX-NF3j8_                                       |
  9 | 
 10 | ## Live Demo
 11 | 
 12 | Check out the live demo here: https://vue-email-editor-demo.netlify.app/ ([Source Code](https://github.com/unlayer/vue-email-editor/tree/master/src))
 13 | 
 14 | ## Installation
 15 | 
 16 | The easiest way to use Vue Email Editor is to install it from Npm or Yarn and include it in your own Vue build process.
 17 | 
 18 | ```
 19 | npm install vue-email-editor --save
 20 | ```
 21 | 
 22 | or
 23 | 
 24 | ```
 25 | yarn add vue-email-editor
 26 | ```
 27 | 
 28 | ## Usage
 29 | 
 30 | Next, you'll need to import the Email Editor component to your app.
 31 | 
 32 | **App.vue**
 33 | 
 34 | ```html
 35 | <template>
 36 |   <div id="app">
 37 |     <div class="container">
 38 |       <div id="bar">
 39 |         <h1>Vue Email Editor (Demo)</h1>
 40 | 
 41 |         <button v-on:click="saveDesign">Save Design</button>
 42 |         <button v-on:click="exportHtml">Export HTML</button>
 43 |       </div>
 44 | 
 45 |       <EmailEditor
 46 |         ref="emailEditor"
 47 |         v-on:load="editorLoaded"
 48 |         v-on:ready="editorReady"
 49 |       />
 50 |     </div>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script>
 55 |   import { EmailEditor } from 'vue-email-editor';
 56 | 
 57 |   export default {
 58 |     name: 'app',
 59 |     components: {
 60 |       EmailEditor,
 61 |     },
 62 |     methods: {
 63 |       // called when the editor is created
 64 |       editorLoaded() {
 65 |         console.log('editorLoaded');
 66 |         // Pass the template JSON here
 67 |         // this.$refs.emailEditor.editor.loadDesign({});
 68 |       },
 69 |       // called when the editor has finished loading
 70 |       editorReady() {
 71 |         console.log('editorReady');
 72 |       },
 73 |       saveDesign() {
 74 |         this.$refs.emailEditor.editor.saveDesign((design) => {
 75 |           console.log('saveDesign', design);
 76 |         });
 77 |       },
 78 |       exportHtml() {
 79 |         this.$refs.emailEditor.editor.exportHtml((data) => {
 80 |           console.log('exportHtml', data);
 81 |         });
 82 |       },
 83 |     },
 84 |   };
 85 | </script>
 86 | ```
 87 | 
 88 | ### Methods
 89 | 
 90 | | method         | params              | description                                             |
 91 | | -------------- | ------------------- | ------------------------------------------------------- |
 92 | | **loadDesign** | `Object data`       | Takes the design JSON and loads it in the editor        |
 93 | | **saveDesign** | `Function callback` | Returns the design JSON in a callback function          |
 94 | | **exportHtml** | `Function callback` | Returns the design HTML and JSON in a callback function |
 95 | 
 96 | See the [example source](https://github.com/unlayer/vue-email-editor/tree/master/src) for a reference implementation.
 97 | 
 98 | ### Properties
 99 | 
100 | - `editorId` `String` HTML div id of the container where the editor will be embedded (optional)
101 | - `minHeight` `String` minimum height to initialize the editor with (default 500px)
102 | - `options` `Object` options passed to the Unlayer editor instance (default {})
103 | - `tools` `Object` configuration for the built-in and custom tools (default {})
104 | - `appearance` `Object` configuration for appearance and theme (default {})
105 | - `projectId` `Integer` Unlayer project ID (optional)
106 | - `locale` `String` translations string (default en-US)
107 | 
108 | See the [Unlayer Docs](https://docs.unlayer.com/) for all available options.
109 | 
110 | Here's an example using the above properties...
111 | 
112 | **App.vue**
113 | 
114 | ```html
115 | <template>
116 |   <div id="app">
117 |     <div class="container">
118 |       <div id="bar">
119 |         <h1>Vue Email Editor (Demo)</h1>
120 | 
121 |         <button v-on:click="saveDesign">Save Design</button>
122 |         <button v-on:click="exportHtml">Export HTML</button>
123 |       </div>
124 | 
125 |       <EmailEditor
126 |         :appearance="appearance"
127 |         :min-height="minHeight"
128 |         :project-id="projectId"
129 |         :locale="locale"
130 |         :tools="tools"
131 |         :options="options"
132 |         ref="emailEditor"
133 |         v-on:load="editorLoaded"
134 |         v-on:ready="editorReady"
135 |       />
136 |     </div>
137 |   </div>
138 | </template>
139 | 
140 | <script>
141 |   import { EmailEditor } from 'vue-email-editor';
142 | 
143 |   export default {
144 |     name: 'app',
145 |     components: {
146 |       EmailEditor,
147 |     },
148 |     data() {
149 |       return {
150 |         minHeight: '1000px',
151 |         locale: 'en',
152 |         projectId: 0, // replace with your project id
153 |         tools: {
154 |           // disable image tool
155 |           image: {
156 |             enabled: false,
157 |           },
158 |         },
159 |         options: {},
160 |         appearance: {
161 |           theme: 'dark',
162 |           panels: {
163 |             tools: {
164 |               dock: 'right',
165 |             },
166 |           },
167 |         },
168 |       };
169 |     },
170 |     methods: {
171 |       // called when the editor is created
172 |       editorLoaded() {
173 |         console.log('editorLoaded');
174 |         // Pass your template JSON here
175 |         // this.$refs.emailEditor.editor.loadDesign({});
176 |       },
177 |       // called when the editor has finished loading
178 |       editorReady() {
179 |         console.log('editorReady');
180 |       },
181 |       saveDesign() {
182 |         this.$refs.emailEditor.editor.saveDesign((design) => {
183 |           console.log('saveDesign', design);
184 |         });
185 |       },
186 |       exportHtml() {
187 |         this.$refs.emailEditor.editor.exportHtml((data) => {
188 |           console.log('exportHtml', data);
189 |         });
190 |       },
191 |     },
192 |   };
193 | </script>
194 | ```
195 | 
196 | ## Custom Tools
197 | 
198 | Custom tools can help you add your own content blocks to the editor. Every application is different and needs different tools to reach it's full potential. [Learn More](https://docs.unlayer.com/docs/custom-tools)
199 | 
200 | [![Custom Tools](https://unroll-assets.s3.amazonaws.com/custom_tools.png)](https://docs.unlayer.com/docs/custom-tools)
201 | 
202 | ## Localization
203 | 
204 | You can submit new language translations by creating a PR on this GitHub repo: https://github.com/unlayer/translations. Translations managed by [PhraseApp](https://phraseapp.com)
205 | 
206 | ### License
207 | 
208 | Copyright (c) 2024 Unlayer. [MIT](LICENSE) Licensed.
209 | 


--------------------------------------------------------------------------------
/src/data/sample.json:
--------------------------------------------------------------------------------
   1 | {
   2 |     "counters": {
   3 |         "u_row": 8,
   4 |         "u_column": 13,
   5 |         "u_content_menu": 1,
   6 |         "u_content_text": 24,
   7 |         "u_content_image": 8,
   8 |         "u_content_button": 2,
   9 |         "u_content_divider": 1,
  10 |         "u_content_heading": 3
  11 |     },
  12 |     "body": {
  13 |         "id": "0QFAKPxyzM",
  14 |         "rows": [
  15 |             {
  16 |                 "id": "-Pm2fEb9Wp",
  17 |                 "cells": [
  18 |                     1
  19 |                 ],
  20 |                 "columns": [
  21 |                     {
  22 |                         "id": "aREOk3UC4g",
  23 |                         "contents": [
  24 |                             {
  25 |                                 "id": "hpEzy7mhvP",
  26 |                                 "type": "image",
  27 |                                 "values": {
  28 |                                     "containerPadding": "10px 10px 0px",
  29 |                                     "anchor": "",
  30 |                                     "src": {
  31 |                                         "url": "https://assets.unlayer.com/projects/139/1676495528722-apple_logo_circle_f5f5f7-000_2x.png",
  32 |                                         "width": 116,
  33 |                                         "height": 116,
  34 |                                         "maxWidth": "15%",
  35 |                                         "autoWidth": false
  36 |                                     },
  37 |                                     "textAlign": "center",
  38 |                                     "altText": "",
  39 |                                     "action": {
  40 |                                         "name": "web",
  41 |                                         "values": {
  42 |                                             "href": "",
  43 |                                             "target": "_blank"
  44 |                                         }
  45 |                                     },
  46 |                                     "hideDesktop": false,
  47 |                                     "displayCondition": null,
  48 |                                     "_meta": {
  49 |                                         "htmlID": "u_content_image_1",
  50 |                                         "htmlClassNames": "u_content_image"
  51 |                                     },
  52 |                                     "selectable": true,
  53 |                                     "draggable": true,
  54 |                                     "duplicatable": true,
  55 |                                     "deletable": true,
  56 |                                     "hideable": true,
  57 |                                     "_override": {
  58 |                                         "mobile": {
  59 |                                             "src": {
  60 |                                                 "maxWidth": "20%",
  61 |                                                 "autoWidth": false
  62 |                                             }
  63 |                                         }
  64 |                                     }
  65 |                                 }
  66 |                             },
  67 |                             {
  68 |                                 "id": "wQof8hV6QL",
  69 |                                 "type": "heading",
  70 |                                 "values": {
  71 |                                     "containerPadding": "0px",
  72 |                                     "anchor": "",
  73 |                                     "headingType": "h1",
  74 |                                     "fontWeight": 400,
  75 |                                     "fontSize": "48px",
  76 |                                     "color": "#ffffff",
  77 |                                     "textAlign": "center",
  78 |                                     "lineHeight": "140%",
  79 |                                     "linkStyle": {
  80 |                                         "inherit": true,
  81 |                                         "linkColor": "#0000ee",
  82 |                                         "linkHoverColor": "#0000ee",
  83 |                                         "linkUnderline": true,
  84 |                                         "linkHoverUnderline": true
  85 |                                     },
  86 |                                     "hideDesktop": false,
  87 |                                     "displayCondition": null,
  88 |                                     "_meta": {
  89 |                                         "htmlID": "u_content_heading_1",
  90 |                                         "htmlClassNames": "u_content_heading"
  91 |                                     },
  92 |                                     "selectable": true,
  93 |                                     "draggable": true,
  94 |                                     "duplicatable": true,
  95 |                                     "deletable": true,
  96 |                                     "hideable": true,
  97 |                                     "text": "MacBook Pro",
  98 |                                     "_override": {
  99 |                                         "mobile": {
 100 |                                             "fontSize": "45px"
 101 |                                         }
 102 |                                     }
 103 |                                 }
 104 |                             },
 105 |                             {
 106 |                                 "id": "tfkkYtjur9",
 107 |                                 "type": "heading",
 108 |                                 "values": {
 109 |                                     "containerPadding": "0px",
 110 |                                     "anchor": "",
 111 |                                     "headingType": "h2",
 112 |                                     "fontSize": "28px",
 113 |                                     "color": "#ffffff",
 114 |                                     "textAlign": "center",
 115 |                                     "lineHeight": "140%",
 116 |                                     "linkStyle": {
 117 |                                         "inherit": true,
 118 |                                         "linkColor": "#0000ee",
 119 |                                         "linkHoverColor": "#0000ee",
 120 |                                         "linkUnderline": true,
 121 |                                         "linkHoverUnderline": true
 122 |                                     },
 123 |                                     "hideDesktop": false,
 124 |                                     "displayCondition": null,
 125 |                                     "_meta": {
 126 |                                         "htmlID": "u_content_heading_2",
 127 |                                         "htmlClassNames": "u_content_heading"
 128 |                                     },
 129 |                                     "selectable": true,
 130 |                                     "draggable": true,
 131 |                                     "duplicatable": true,
 132 |                                     "deletable": true,
 133 |                                     "hideable": true,
 134 |                                     "text": "Mover. Maker. Boundary breaker.",
 135 |                                     "_override": {
 136 |                                         "mobile": {
 137 |                                             "fontSize": "19px"
 138 |                                         }
 139 |                                     }
 140 |                                 }
 141 |                             },
 142 |                             {
 143 |                                 "id": "7wzu4Z8K86",
 144 |                                 "type": "text",
 145 |                                 "values": {
 146 |                                     "containerPadding": "10px",
 147 |                                     "anchor": "",
 148 |                                     "fontSize": "17px",
 149 |                                     "textAlign": "center",
 150 |                                     "lineHeight": "140%",
 151 |                                     "linkStyle": {
 152 |                                         "inherit": true,
 153 |                                         "linkColor": "#0000ee",
 154 |                                         "linkHoverColor": "#0000ee",
 155 |                                         "linkUnderline": true,
 156 |                                         "linkHoverUnderline": true
 157 |                                     },
 158 |                                     "hideDesktop": false,
 159 |                                     "displayCondition": null,
 160 |                                     "_meta": {
 161 |                                         "htmlID": "u_content_text_2",
 162 |                                         "htmlClassNames": "u_content_text"
 163 |                                     },
 164 |                                     "selectable": true,
 165 |                                     "draggable": true,
 166 |                                     "duplicatable": true,
 167 |                                     "deletable": true,
 168 |                                     "hideable": true,
 169 |                                     "text": "<p style=\"line-height: 140%;\">From $1999 or $166.58/mo. for 12 mo.</p>",
 170 |                                     "_override": {
 171 |                                         "mobile": {
 172 |                                             "fontSize": "14px"
 173 |                                         }
 174 |                                     }
 175 |                                 }
 176 |                             }
 177 |                         ],
 178 |                         "values": {
 179 |                             "_meta": {
 180 |                                 "htmlID": "u_column_1",
 181 |                                 "htmlClassNames": "u_column"
 182 |                             },
 183 |                             "border": {},
 184 |                             "padding": "0px",
 185 |                             "backgroundColor": ""
 186 |                         }
 187 |                     }
 188 |                 ],
 189 |                 "values": {
 190 |                     "displayCondition": null,
 191 |                     "columns": false,
 192 |                     "backgroundColor": "",
 193 |                     "columnsBackgroundColor": "",
 194 |                     "backgroundImage": {
 195 |                         "url": "",
 196 |                         "fullWidth": true,
 197 |                         "repeat": "no-repeat",
 198 |                         "size": "custom",
 199 |                         "position": "center"
 200 |                     },
 201 |                     "padding": "0px",
 202 |                     "anchor": "",
 203 |                     "hideDesktop": false,
 204 |                     "_meta": {
 205 |                         "htmlID": "u_row_1",
 206 |                         "htmlClassNames": "u_row"
 207 |                     },
 208 |                     "selectable": true,
 209 |                     "draggable": true,
 210 |                     "duplicatable": true,
 211 |                     "deletable": true,
 212 |                     "hideable": true
 213 |                 }
 214 |             },
 215 |             {
 216 |                 "id": "A-f41NTazI",
 217 |                 "cells": [
 218 |                     1,
 219 |                     1
 220 |                 ],
 221 |                 "columns": [
 222 |                     {
 223 |                         "id": "SfLBIwDbWU",
 224 |                         "contents": [
 225 |                             {
 226 |                                 "id": "vjfsdzgJRX",
 227 |                                 "type": "button",
 228 |                                 "values": {
 229 |                                     "containerPadding": "10px",
 230 |                                     "anchor": "",
 231 |                                     "href": {
 232 |                                         "name": "web",
 233 |                                         "values": {
 234 |                                             "href": "",
 235 |                                             "target": "_blank"
 236 |                                         }
 237 |                                     },
 238 |                                     "buttonColors": {
 239 |                                         "color": "#FFFFFF",
 240 |                                         "backgroundColor": "#0071e3",
 241 |                                         "hoverColor": "#FFFFFF",
 242 |                                         "hoverBackgroundColor": "#3AAEE0"
 243 |                                     },
 244 |                                     "size": {
 245 |                                         "autoWidth": true,
 246 |                                         "width": "100%"
 247 |                                     },
 248 |                                     "fontSize": "17px",
 249 |                                     "textAlign": "right",
 250 |                                     "lineHeight": "120%",
 251 |                                     "padding": "10px 20px",
 252 |                                     "border": {},
 253 |                                     "borderRadius": "25px",
 254 |                                     "hideDesktop": false,
 255 |                                     "displayCondition": null,
 256 |                                     "_meta": {
 257 |                                         "htmlID": "u_content_button_2",
 258 |                                         "htmlClassNames": "u_content_button"
 259 |                                     },
 260 |                                     "selectable": true,
 261 |                                     "draggable": true,
 262 |                                     "duplicatable": true,
 263 |                                     "deletable": true,
 264 |                                     "hideable": true,
 265 |                                     "text": "<span style=\"line-height: 20.4px;\">Buy</span>",
 266 |                                     "calculatedWidth": 69,
 267 |                                     "calculatedHeight": 40,
 268 |                                     "_override": {
 269 |                                         "mobile": {
 270 |                                             "textAlign": "center"
 271 |                                         }
 272 |                                     }
 273 |                                 }
 274 |                             }
 275 |                         ],
 276 |                         "values": {
 277 |                             "_meta": {
 278 |                                 "htmlID": "u_column_2",
 279 |                                 "htmlClassNames": "u_column"
 280 |                             },
 281 |                             "border": {},
 282 |                             "padding": "0px",
 283 |                             "borderRadius": "0px",
 284 |                             "backgroundColor": ""
 285 |                         }
 286 |                     },
 287 |                     {
 288 |                         "id": "oHGVnfFNrL",
 289 |                         "contents": [
 290 |                             {
 291 |                                 "id": "X9LHO8t95H",
 292 |                                 "type": "text",
 293 |                                 "values": {
 294 |                                     "containerPadding": "20px",
 295 |                                     "anchor": "",
 296 |                                     "fontSize": "17px",
 297 |                                     "color": "#0071e3",
 298 |                                     "textAlign": "left",
 299 |                                     "lineHeight": "140%",
 300 |                                     "linkStyle": {
 301 |                                         "inherit": true,
 302 |                                         "linkColor": "#0000ee",
 303 |                                         "linkHoverColor": "#0000ee",
 304 |                                         "linkUnderline": true,
 305 |                                         "linkHoverUnderline": true
 306 |                                     },
 307 |                                     "hideDesktop": false,
 308 |                                     "displayCondition": null,
 309 |                                     "_meta": {
 310 |                                         "htmlID": "u_content_text_3",
 311 |                                         "htmlClassNames": "u_content_text"
 312 |                                     },
 313 |                                     "selectable": true,
 314 |                                     "draggable": true,
 315 |                                     "duplicatable": true,
 316 |                                     "deletable": true,
 317 |                                     "hideable": true,
 318 |                                     "text": "<p style=\"line-height: 140%;\">Learn more </p>",
 319 |                                     "_override": {
 320 |                                         "mobile": {
 321 |                                             "textAlign": "center"
 322 |                                         }
 323 |                                     }
 324 |                                 }
 325 |                             }
 326 |                         ],
 327 |                         "values": {
 328 |                             "_meta": {
 329 |                                 "htmlID": "u_column_3",
 330 |                                 "htmlClassNames": "u_column"
 331 |                             },
 332 |                             "border": {},
 333 |                             "padding": "0px",
 334 |                             "borderRadius": "0px",
 335 |                             "backgroundColor": ""
 336 |                         }
 337 |                     }
 338 |                 ],
 339 |                 "values": {
 340 |                     "displayCondition": null,
 341 |                     "columns": false,
 342 |                     "backgroundColor": "",
 343 |                     "columnsBackgroundColor": "",
 344 |                     "backgroundImage": {
 345 |                         "url": "",
 346 |                         "fullWidth": true,
 347 |                         "repeat": "no-repeat",
 348 |                         "size": "custom",
 349 |                         "position": "center"
 350 |                     },
 351 |                     "padding": "0px",
 352 |                     "anchor": "",
 353 |                     "hideDesktop": false,
 354 |                     "_meta": {
 355 |                         "htmlID": "u_row_2",
 356 |                         "htmlClassNames": "u_row"
 357 |                     },
 358 |                     "selectable": true,
 359 |                     "draggable": true,
 360 |                     "duplicatable": true,
 361 |                     "deletable": true,
 362 |                     "hideable": true
 363 |                 }
 364 |             },
 365 |             {
 366 |                 "id": "Rd4HAvqb8t",
 367 |                 "cells": [
 368 |                     1
 369 |                 ],
 370 |                 "columns": [
 371 |                     {
 372 |                         "id": "_t6kskqCwL",
 373 |                         "contents": [
 374 |                             {
 375 |                                 "id": "AF8ZpW__0i",
 376 |                                 "type": "image",
 377 |                                 "values": {
 378 |                                     "containerPadding": "0px",
 379 |                                     "anchor": "",
 380 |                                     "src": {
 381 |                                         "url": "https://assets.unlayer.com/projects/139/1676495949571-hero_2x.jpg",
 382 |                                         "width": 1424,
 383 |                                         "height": 880
 384 |                                     },
 385 |                                     "textAlign": "center",
 386 |                                     "altText": "",
 387 |                                     "action": {
 388 |                                         "name": "web",
 389 |                                         "values": {
 390 |                                             "href": "",
 391 |                                             "target": "_blank"
 392 |                                         }
 393 |                                     },
 394 |                                     "hideDesktop": false,
 395 |                                     "displayCondition": null,
 396 |                                     "_meta": {
 397 |                                         "htmlID": "u_content_image_2",
 398 |                                         "htmlClassNames": "u_content_image"
 399 |                                     },
 400 |                                     "selectable": true,
 401 |                                     "draggable": true,
 402 |                                     "duplicatable": true,
 403 |                                     "deletable": true,
 404 |                                     "hideable": true
 405 |                                 }
 406 |                             },
 407 |                             {
 408 |                                 "id": "iEmfF6xJBD",
 409 |                                 "type": "text",
 410 |                                 "values": {
 411 |                                     "containerPadding": "10px",
 412 |                                     "anchor": "",
 413 |                                     "fontWeight": 700,
 414 |                                     "fontSize": "21px",
 415 |                                     "color": "#9d9d9d",
 416 |                                     "textAlign": "center",
 417 |                                     "lineHeight": "140%",
 418 |                                     "linkStyle": {
 419 |                                         "inherit": true,
 420 |                                         "linkColor": "#0000ee",
 421 |                                         "linkHoverColor": "#0000ee",
 422 |                                         "linkUnderline": true,
 423 |                                         "linkHoverUnderline": true
 424 |                                     },
 425 |                                     "hideDesktop": false,
 426 |                                     "displayCondition": null,
 427 |                                     "_meta": {
 428 |                                         "htmlID": "u_content_text_4",
 429 |                                         "htmlClassNames": "u_content_text"
 430 |                                     },
 431 |                                     "selectable": true,
 432 |                                     "draggable": true,
 433 |                                     "duplicatable": true,
 434 |                                     "deletable": true,
 435 |                                     "hideable": true,
 436 |                                     "text": "<p style=\"line-height: 140%;\">Supercharged by M2 Pro and M2 Max.</p>",
 437 |                                     "_override": {
 438 |                                         "mobile": {
 439 |                                             "lineHeight": "140%",
 440 |                                             "fontSize": "18px"
 441 |                                         }
 442 |                                     }
 443 |                                 }
 444 |                             },
 445 |                             {
 446 |                                 "id": "usZCBV0vIV",
 447 |                                 "type": "text",
 448 |                                 "values": {
 449 |                                     "containerPadding": "10px",
 450 |                                     "anchor": "",
 451 |                                     "fontWeight": 700,
 452 |                                     "fontSize": "21px",
 453 |                                     "color": "#9d9d9d",
 454 |                                     "textAlign": "center",
 455 |                                     "lineHeight": "140%",
 456 |                                     "linkStyle": {
 457 |                                         "inherit": true,
 458 |                                         "linkColor": "#0000ee",
 459 |                                         "linkHoverColor": "#0000ee",
 460 |                                         "linkUnderline": true,
 461 |                                         "linkHoverUnderline": true
 462 |                                     },
 463 |                                     "hideDesktop": false,
 464 |                                     "displayCondition": null,
 465 |                                     "_meta": {
 466 |                                         "htmlID": "u_content_text_7",
 467 |                                         "htmlClassNames": "u_content_text"
 468 |                                     },
 469 |                                     "selectable": true,
 470 |                                     "draggable": true,
 471 |                                     "duplicatable": true,
 472 |                                     "deletable": true,
 473 |                                     "hideable": true,
 474 |                                     "text": "<p style=\"line-height: 140%;\">Up to 22 hours of battery life.</p>",
 475 |                                     "_override": {
 476 |                                         "mobile": {
 477 |                                             "fontSize": "18px"
 478 |                                         }
 479 |                                     }
 480 |                                 }
 481 |                             },
 482 |                             {
 483 |                                 "id": "GvsqJNYPRO",
 484 |                                 "type": "text",
 485 |                                 "values": {
 486 |                                     "containerPadding": "10px",
 487 |                                     "anchor": "",
 488 |                                     "fontWeight": 700,
 489 |                                     "fontSize": "21px",
 490 |                                     "color": "#9d9d9d",
 491 |                                     "textAlign": "center",
 492 |                                     "lineHeight": "140%",
 493 |                                     "linkStyle": {
 494 |                                         "inherit": true,
 495 |                                         "linkColor": "#0000ee",
 496 |                                         "linkHoverColor": "#0000ee",
 497 |                                         "linkUnderline": true,
 498 |                                         "linkHoverUnderline": true
 499 |                                     },
 500 |                                     "hideDesktop": false,
 501 |                                     "displayCondition": null,
 502 |                                     "_meta": {
 503 |                                         "htmlID": "u_content_text_6",
 504 |                                         "htmlClassNames": "u_content_text"
 505 |                                     },
 506 |                                     "selectable": true,
 507 |                                     "draggable": true,
 508 |                                     "duplicatable": true,
 509 |                                     "deletable": true,
 510 |                                     "hideable": true,
 511 |                                     "text": "<p style=\"line-height: 140%;\">Stunning Liquid Retina XDR display.</p>",
 512 |                                     "_override": {
 513 |                                         "mobile": {
 514 |                                             "fontSize": "18px"
 515 |                                         }
 516 |                                     }
 517 |                                 }
 518 |                             },
 519 |                             {
 520 |                                 "id": "T_w1lypU3k",
 521 |                                 "type": "text",
 522 |                                 "values": {
 523 |                                     "containerPadding": "10px",
 524 |                                     "anchor": "",
 525 |                                     "fontWeight": 700,
 526 |                                     "fontSize": "21px",
 527 |                                     "color": "#9d9d9d",
 528 |                                     "textAlign": "center",
 529 |                                     "lineHeight": "140%",
 530 |                                     "linkStyle": {
 531 |                                         "inherit": true,
 532 |                                         "linkColor": "#0000ee",
 533 |                                         "linkHoverColor": "#0000ee",
 534 |                                         "linkUnderline": true,
 535 |                                         "linkHoverUnderline": true
 536 |                                     },
 537 |                                     "hideDesktop": false,
 538 |                                     "displayCondition": null,
 539 |                                     "_meta": {
 540 |                                         "htmlID": "u_content_text_5",
 541 |                                         "htmlClassNames": "u_content_text"
 542 |                                     },
 543 |                                     "selectable": true,
 544 |                                     "draggable": true,
 545 |                                     "duplicatable": true,
 546 |                                     "deletable": true,
 547 |                                     "hideable": true,
 548 |                                     "text": "<p style=\"line-height: 140%;\">All the ports you need and faster Wi-Fi 6E.3</p>",
 549 |                                     "_override": {
 550 |                                         "mobile": {
 551 |                                             "fontSize": "18px"
 552 |                                         }
 553 |                                     }
 554 |                                 }
 555 |                             }
 556 |                         ],
 557 |                         "values": {
 558 |                             "_meta": {
 559 |                                 "htmlID": "u_column_4",
 560 |                                 "htmlClassNames": "u_column"
 561 |                             },
 562 |                             "border": {},
 563 |                             "padding": "0px",
 564 |                             "borderRadius": "0px",
 565 |                             "backgroundColor": ""
 566 |                         }
 567 |                     }
 568 |                 ],
 569 |                 "values": {
 570 |                     "displayCondition": null,
 571 |                     "columns": false,
 572 |                     "backgroundColor": "",
 573 |                     "columnsBackgroundColor": "",
 574 |                     "backgroundImage": {
 575 |                         "url": "",
 576 |                         "fullWidth": true,
 577 |                         "repeat": "no-repeat",
 578 |                         "size": "custom",
 579 |                         "position": "center"
 580 |                     },
 581 |                     "padding": "15px 15px 70px",
 582 |                     "anchor": "",
 583 |                     "hideDesktop": false,
 584 |                     "_meta": {
 585 |                         "htmlID": "u_row_3",
 586 |                         "htmlClassNames": "u_row"
 587 |                     },
 588 |                     "selectable": true,
 589 |                     "draggable": true,
 590 |                     "duplicatable": true,
 591 |                     "deletable": true,
 592 |                     "hideable": true
 593 |                 }
 594 |             },
 595 |             {
 596 |                 "id": "Wlvn-fimOW",
 597 |                 "cells": [
 598 |                     1
 599 |                 ],
 600 |                 "columns": [
 601 |                     {
 602 |                         "id": "EmTZshrUgj",
 603 |                         "contents": [
 604 |                             {
 605 |                                 "id": "KXAX-ozp-i",
 606 |                                 "type": "heading",
 607 |                                 "values": {
 608 |                                     "containerPadding": "10px",
 609 |                                     "anchor": "",
 610 |                                     "headingType": "h1",
 611 |                                     "fontSize": "32px",
 612 |                                     "color": "#ffffff",
 613 |                                     "textAlign": "center",
 614 |                                     "lineHeight": "120%",
 615 |                                     "linkStyle": {
 616 |                                         "inherit": true,
 617 |                                         "linkColor": "#0000ee",
 618 |                                         "linkHoverColor": "#0000ee",
 619 |                                         "linkUnderline": true,
 620 |                                         "linkHoverUnderline": true
 621 |                                     },
 622 |                                     "hideDesktop": false,
 623 |                                     "displayCondition": null,
 624 |                                     "_meta": {
 625 |                                         "htmlID": "u_content_heading_3",
 626 |                                         "htmlClassNames": "u_content_heading"
 627 |                                     },
 628 |                                     "selectable": true,
 629 |                                     "draggable": true,
 630 |                                     "duplicatable": true,
 631 |                                     "deletable": true,
 632 |                                     "hideable": true,
 633 |                                     "text": "Why Apple is the best place<br />to buy your new Mac.",
 634 |                                     "_override": {
 635 |                                         "mobile": {
 636 |                                             "fontSize": "28px"
 637 |                                         }
 638 |                                     }
 639 |                                 }
 640 |                             }
 641 |                         ],
 642 |                         "values": {
 643 |                             "_meta": {
 644 |                                 "htmlID": "u_column_5",
 645 |                                 "htmlClassNames": "u_column"
 646 |                             },
 647 |                             "border": {},
 648 |                             "padding": "0px",
 649 |                             "borderRadius": "0px",
 650 |                             "backgroundColor": ""
 651 |                         }
 652 |                     }
 653 |                 ],
 654 |                 "values": {
 655 |                     "displayCondition": null,
 656 |                     "columns": false,
 657 |                     "backgroundColor": "#1d1d1f",
 658 |                     "columnsBackgroundColor": "",
 659 |                     "backgroundImage": {
 660 |                         "url": "",
 661 |                         "fullWidth": true,
 662 |                         "repeat": "no-repeat",
 663 |                         "size": "custom",
 664 |                         "position": "center"
 665 |                     },
 666 |                     "padding": "50px",
 667 |                     "anchor": "",
 668 |                     "hideDesktop": false,
 669 |                     "_meta": {
 670 |                         "htmlID": "u_row_4",
 671 |                         "htmlClassNames": "u_row"
 672 |                     },
 673 |                     "selectable": true,
 674 |                     "draggable": true,
 675 |                     "duplicatable": true,
 676 |                     "deletable": true,
 677 |                     "hideable": true
 678 |                 }
 679 |             },
 680 |             {
 681 |                 "id": "qRAvYBUrR3",
 682 |                 "cells": [
 683 |                     1,
 684 |                     1
 685 |                 ],
 686 |                 "columns": [
 687 |                     {
 688 |                         "id": "MfyrG9rNcx",
 689 |                         "contents": [
 690 |                             {
 691 |                                 "id": "qnuJUd79Ge",
 692 |                                 "type": "text",
 693 |                                 "values": {
 694 |                                     "containerPadding": "10px",
 695 |                                     "anchor": "",
 696 |                                     "fontSize": "24px",
 697 |                                     "textAlign": "center",
 698 |                                     "lineHeight": "120%",
 699 |                                     "linkStyle": {
 700 |                                         "inherit": true,
 701 |                                         "linkColor": "#0000ee",
 702 |                                         "linkHoverColor": "#0000ee",
 703 |                                         "linkUnderline": true,
 704 |                                         "linkHoverUnderline": true
 705 |                                     },
 706 |                                     "hideDesktop": false,
 707 |                                     "displayCondition": null,
 708 |                                     "_meta": {
 709 |                                         "htmlID": "u_content_text_8",
 710 |                                         "htmlClassNames": "u_content_text"
 711 |                                     },
 712 |                                     "selectable": true,
 713 |                                     "draggable": true,
 714 |                                     "duplicatable": true,
 715 |                                     "deletable": true,
 716 |                                     "hideable": true,
 717 |                                     "text": "<p style=\"line-height: 120%;\">Get credit toward</p>\n<p style=\"line-height: 120%;\">a new Mac.</p>"
 718 |                                 }
 719 |                             },
 720 |                             {
 721 |                                 "id": "RDIKTy_DOp",
 722 |                                 "type": "text",
 723 |                                 "values": {
 724 |                                     "containerPadding": "10px",
 725 |                                     "anchor": "",
 726 |                                     "textAlign": "center",
 727 |                                     "lineHeight": "150%",
 728 |                                     "linkStyle": {
 729 |                                         "inherit": true,
 730 |                                         "linkColor": "#0000ee",
 731 |                                         "linkHoverColor": "#0000ee",
 732 |                                         "linkUnderline": true,
 733 |                                         "linkHoverUnderline": true
 734 |                                     },
 735 |                                     "hideDesktop": false,
 736 |                                     "displayCondition": null,
 737 |                                     "_meta": {
 738 |                                         "htmlID": "u_content_text_9",
 739 |                                         "htmlClassNames": "u_content_text"
 740 |                                     },
 741 |                                     "selectable": true,
 742 |                                     "draggable": true,
 743 |                                     "duplicatable": true,
 744 |                                     "deletable": true,
 745 |                                     "hideable": true,
 746 |                                     "text": "<p style=\"line-height: 150%;\">With Apple Trade In, just give us your eligible Mac and get credit for a new one. It’s good for you and the planet.</p>"
 747 |                                 }
 748 |                             },
 749 |                             {
 750 |                                 "id": "tnH6A8J6sD",
 751 |                                 "type": "text",
 752 |                                 "values": {
 753 |                                     "containerPadding": "10px",
 754 |                                     "anchor": "",
 755 |                                     "fontSize": "14px",
 756 |                                     "color": "#0071e3",
 757 |                                     "textAlign": "center",
 758 |                                     "lineHeight": "140%",
 759 |                                     "linkStyle": {
 760 |                                         "inherit": true,
 761 |                                         "linkColor": "#0000ee",
 762 |                                         "linkHoverColor": "#0000ee",
 763 |                                         "linkUnderline": true,
 764 |                                         "linkHoverUnderline": true
 765 |                                     },
 766 |                                     "hideDesktop": false,
 767 |                                     "displayCondition": null,
 768 |                                     "_meta": {
 769 |                                         "htmlID": "u_content_text_10",
 770 |                                         "htmlClassNames": "u_content_text"
 771 |                                     },
 772 |                                     "selectable": true,
 773 |                                     "draggable": true,
 774 |                                     "duplicatable": true,
 775 |                                     "deletable": true,
 776 |                                     "hideable": true,
 777 |                                     "text": "<p style=\"line-height: 140%;\">Find your trade-in value</p>"
 778 |                                 }
 779 |                             }
 780 |                         ],
 781 |                         "values": {
 782 |                             "_meta": {
 783 |                                 "htmlID": "u_column_6",
 784 |                                 "htmlClassNames": "u_column"
 785 |                             },
 786 |                             "border": {},
 787 |                             "padding": "33px",
 788 |                             "borderRadius": "0px",
 789 |                             "backgroundColor": ""
 790 |                         }
 791 |                     },
 792 |                     {
 793 |                         "id": "jGDnuQs-ho",
 794 |                         "contents": [
 795 |                             {
 796 |                                 "id": "Wbvl_87V-4",
 797 |                                 "type": "image",
 798 |                                 "values": {
 799 |                                     "containerPadding": "0px",
 800 |                                     "anchor": "",
 801 |                                     "src": {
 802 |                                         "url": "https://assets.unlayer.com/projects/139/1676496418898-credit_mac_2x.jpg",
 803 |                                         "width": 712,
 804 |                                         "height": 550
 805 |                                     },
 806 |                                     "textAlign": "center",
 807 |                                     "altText": "",
 808 |                                     "action": {
 809 |                                         "name": "web",
 810 |                                         "values": {
 811 |                                             "href": "",
 812 |                                             "target": "_blank"
 813 |                                         }
 814 |                                     },
 815 |                                     "hideDesktop": false,
 816 |                                     "displayCondition": null,
 817 |                                     "_meta": {
 818 |                                         "htmlID": "u_content_image_3",
 819 |                                         "htmlClassNames": "u_content_image"
 820 |                                     },
 821 |                                     "selectable": true,
 822 |                                     "draggable": true,
 823 |                                     "duplicatable": true,
 824 |                                     "deletable": true,
 825 |                                     "hideable": true
 826 |                                 }
 827 |                             }
 828 |                         ],
 829 |                         "values": {
 830 |                             "_meta": {
 831 |                                 "htmlID": "u_column_7",
 832 |                                 "htmlClassNames": "u_column"
 833 |                             },
 834 |                             "border": {},
 835 |                             "padding": "0px",
 836 |                             "borderRadius": "0px",
 837 |                             "backgroundColor": ""
 838 |                         }
 839 |                     }
 840 |                 ],
 841 |                 "values": {
 842 |                     "displayCondition": null,
 843 |                     "columns": false,
 844 |                     "backgroundColor": "#1d1d1f",
 845 |                     "columnsBackgroundColor": "#000000",
 846 |                     "backgroundImage": {
 847 |                         "url": "",
 848 |                         "fullWidth": true,
 849 |                         "repeat": "no-repeat",
 850 |                         "size": "custom",
 851 |                         "position": "center"
 852 |                     },
 853 |                     "padding": "5px",
 854 |                     "anchor": "",
 855 |                     "hideDesktop": false,
 856 |                     "_meta": {
 857 |                         "htmlID": "u_row_5",
 858 |                         "htmlClassNames": "u_row"
 859 |                     },
 860 |                     "selectable": true,
 861 |                     "draggable": true,
 862 |                     "duplicatable": true,
 863 |                     "deletable": true,
 864 |                     "hideable": true
 865 |                 }
 866 |             },
 867 |             {
 868 |                 "id": "xsDeI6ThVX",
 869 |                 "cells": [
 870 |                     1,
 871 |                     1
 872 |                 ],
 873 |                 "columns": [
 874 |                     {
 875 |                         "id": "PtkZbFNtjL",
 876 |                         "contents": [
 877 |                             {
 878 |                                 "id": "JZtislN2W7",
 879 |                                 "type": "text",
 880 |                                 "values": {
 881 |                                     "containerPadding": "10px",
 882 |                                     "anchor": "",
 883 |                                     "fontSize": "24px",
 884 |                                     "textAlign": "center",
 885 |                                     "lineHeight": "120%",
 886 |                                     "linkStyle": {
 887 |                                         "inherit": true,
 888 |                                         "linkColor": "#0000ee",
 889 |                                         "linkHoverColor": "#0000ee",
 890 |                                         "linkUnderline": true,
 891 |                                         "linkHoverUnderline": true
 892 |                                     },
 893 |                                     "hideDesktop": false,
 894 |                                     "displayCondition": null,
 895 |                                     "_meta": {
 896 |                                         "htmlID": "u_content_text_11",
 897 |                                         "htmlClassNames": "u_content_text"
 898 |                                     },
 899 |                                     "selectable": true,
 900 |                                     "draggable": true,
 901 |                                     "duplicatable": true,
 902 |                                     "deletable": true,
 903 |                                     "hideable": true,
 904 |                                     "text": "<p style=\"line-height: 120%;\">Apple Card Monthly Installments.</p>"
 905 |                                 }
 906 |                             },
 907 |                             {
 908 |                                 "id": "9rqc5f7Vsk",
 909 |                                 "type": "text",
 910 |                                 "values": {
 911 |                                     "containerPadding": "10px",
 912 |                                     "anchor": "",
 913 |                                     "textAlign": "center",
 914 |                                     "lineHeight": "150%",
 915 |                                     "linkStyle": {
 916 |                                         "inherit": true,
 917 |                                         "linkColor": "#0000ee",
 918 |                                         "linkHoverColor": "#0000ee",
 919 |                                         "linkUnderline": true,
 920 |                                         "linkHoverUnderline": true
 921 |                                     },
 922 |                                     "hideDesktop": false,
 923 |                                     "displayCondition": null,
 924 |                                     "_meta": {
 925 |                                         "htmlID": "u_content_text_24",
 926 |                                         "htmlClassNames": "u_content_text"
 927 |                                     },
 928 |                                     "selectable": true,
 929 |                                     "draggable": true,
 930 |                                     "duplicatable": true,
 931 |                                     "deletable": true,
 932 |                                     "hideable": true,
 933 |                                     "text": "<p style=\"line-height: 150%;\">Pay over time, interest-free when you choose to check out with Apple Card Monthly Installments.</p>"
 934 |                                 }
 935 |                             },
 936 |                             {
 937 |                                 "id": "le8EzyAcDY",
 938 |                                 "type": "text",
 939 |                                 "values": {
 940 |                                     "containerPadding": "10px",
 941 |                                     "anchor": "",
 942 |                                     "fontSize": "14px",
 943 |                                     "color": "#0071e3",
 944 |                                     "textAlign": "center",
 945 |                                     "lineHeight": "140%",
 946 |                                     "linkStyle": {
 947 |                                         "inherit": true,
 948 |                                         "linkColor": "#0000ee",
 949 |                                         "linkHoverColor": "#0000ee",
 950 |                                         "linkUnderline": true,
 951 |                                         "linkHoverUnderline": true
 952 |                                     },
 953 |                                     "hideDesktop": false,
 954 |                                     "displayCondition": null,
 955 |                                     "_meta": {
 956 |                                         "htmlID": "u_content_text_13",
 957 |                                         "htmlClassNames": "u_content_text"
 958 |                                     },
 959 |                                     "selectable": true,
 960 |                                     "draggable": true,
 961 |                                     "duplicatable": true,
 962 |                                     "deletable": true,
 963 |                                     "hideable": true,
 964 |                                     "text": "<p style=\"line-height: 140%;\">Learn more</p>"
 965 |                                 }
 966 |                             },
 967 |                             {
 968 |                                 "id": "EZmcoOSqCd",
 969 |                                 "type": "image",
 970 |                                 "values": {
 971 |                                     "containerPadding": "0px",
 972 |                                     "anchor": "",
 973 |                                     "src": {
 974 |                                         "url": "https://assets.unlayer.com/projects/139/1676497065877-apple_card_2x.jpg",
 975 |                                         "width": 700,
 976 |                                         "height": 390
 977 |                                     },
 978 |                                     "textAlign": "center",
 979 |                                     "altText": "",
 980 |                                     "action": {
 981 |                                         "name": "web",
 982 |                                         "values": {
 983 |                                             "href": "",
 984 |                                             "target": "_blank"
 985 |                                         }
 986 |                                     },
 987 |                                     "hideDesktop": false,
 988 |                                     "displayCondition": null,
 989 |                                     "_meta": {
 990 |                                         "htmlID": "u_content_image_7",
 991 |                                         "htmlClassNames": "u_content_image"
 992 |                                     },
 993 |                                     "selectable": true,
 994 |                                     "draggable": true,
 995 |                                     "duplicatable": true,
 996 |                                     "deletable": true,
 997 |                                     "hideable": true
 998 |                                 }
 999 |                             }
1000 |                         ],
1001 |                         "values": {
1002 |                             "_meta": {
1003 |                                 "htmlID": "u_column_8",
1004 |                                 "htmlClassNames": "u_column"
1005 |                             },
1006 |                             "border": {
1007 |                                 "borderTopColor": "#CCC",
1008 |                                 "borderTopStyle": "solid",
1009 |                                 "borderTopWidth": "0px",
1010 |                                 "borderLeftColor": "#CCC",
1011 |                                 "borderLeftStyle": "solid",
1012 |                                 "borderLeftWidth": "0px",
1013 |                                 "borderRightColor": "#1d1d1f",
1014 |                                 "borderRightStyle": "solid",
1015 |                                 "borderRightWidth": "5px",
1016 |                                 "borderBottomColor": "#CCC",
1017 |                                 "borderBottomStyle": "solid",
1018 |                                 "borderBottomWidth": "0px"
1019 |                             },
1020 |                             "padding": "33px 0px 0px",
1021 |                             "_override": {
1022 |                                 "mobile": {
1023 |                                     "border": {
1024 |                                         "borderTopColor": "#CCC",
1025 |                                         "borderTopStyle": "solid",
1026 |                                         "borderTopWidth": "0px",
1027 |                                         "borderLeftColor": "#CCC",
1028 |                                         "borderLeftStyle": "solid",
1029 |                                         "borderLeftWidth": "0px",
1030 |                                         "borderRightColor": "#CCC",
1031 |                                         "borderRightStyle": "solid",
1032 |                                         "borderRightWidth": "0px",
1033 |                                         "borderBottomColor": "#CCC",
1034 |                                         "borderBottomStyle": "solid",
1035 |                                         "borderBottomWidth": "0px"
1036 |                                     }
1037 |                                 }
1038 |                             },
1039 |                             "borderRadius": "0px",
1040 |                             "backgroundColor": ""
1041 |                         }
1042 |                     },
1043 |                     {
1044 |                         "id": "jAFMuhCh-p",
1045 |                         "contents": [
1046 |                             {
1047 |                                 "id": "tXUPtUC2gk",
1048 |                                 "type": "text",
1049 |                                 "values": {
1050 |                                     "containerPadding": "10px",
1051 |                                     "anchor": "",
1052 |                                     "fontSize": "24px",
1053 |                                     "textAlign": "center",
1054 |                                     "lineHeight": "120%",
1055 |                                     "linkStyle": {
1056 |                                         "inherit": true,
1057 |                                         "linkColor": "#0000ee",
1058 |                                         "linkHoverColor": "#0000ee",
1059 |                                         "linkUnderline": true,
1060 |                                         "linkHoverUnderline": true
1061 |                                     },
1062 |                                     "hideDesktop": false,
1063 |                                     "displayCondition": null,
1064 |                                     "_meta": {
1065 |                                         "htmlID": "u_content_text_21",
1066 |                                         "htmlClassNames": "u_content_text"
1067 |                                     },
1068 |                                     "selectable": true,
1069 |                                     "draggable": true,
1070 |                                     "duplicatable": true,
1071 |                                     "deletable": true,
1072 |                                     "hideable": true,
1073 |                                     "text": "<p style=\"line-height: 120%;\">Save on a new</p>\n<p style=\"line-height: 120%;\">Mac with Apple</p>\n<p style=\"line-height: 120%;\">education pricing.</p>"
1074 |                                 }
1075 |                             },
1076 |                             {
1077 |                                 "id": "fUoTe1sYhQ",
1078 |                                 "type": "text",
1079 |                                 "values": {
1080 |                                     "containerPadding": "10px",
1081 |                                     "anchor": "",
1082 |                                     "fontSize": "14px",
1083 |                                     "color": "#0071e3",
1084 |                                     "textAlign": "center",
1085 |                                     "lineHeight": "140%",
1086 |                                     "linkStyle": {
1087 |                                         "inherit": true,
1088 |                                         "linkColor": "#0000ee",
1089 |                                         "linkHoverColor": "#0000ee",
1090 |                                         "linkUnderline": true,
1091 |                                         "linkHoverUnderline": true
1092 |                                     },
1093 |                                     "hideDesktop": false,
1094 |                                     "displayCondition": null,
1095 |                                     "_meta": {
1096 |                                         "htmlID": "u_content_text_23",
1097 |                                         "htmlClassNames": "u_content_text"
1098 |                                     },
1099 |                                     "selectable": true,
1100 |                                     "draggable": true,
1101 |                                     "duplicatable": true,
1102 |                                     "deletable": true,
1103 |                                     "hideable": true,
1104 |                                     "text": "<p style=\"line-height: 140%;\">Shop</p>"
1105 |                                 }
1106 |                             },
1107 |                             {
1108 |                                 "id": "ij9PdsfvZQ",
1109 |                                 "type": "image",
1110 |                                 "values": {
1111 |                                     "containerPadding": "21px 0px 0px",
1112 |                                     "anchor": "",
1113 |                                     "src": {
1114 |                                         "url": "https://assets.unlayer.com/projects/139/1676497143860-edu_mac_2x.jpg",
1115 |                                         "width": 700,
1116 |                                         "height": 390
1117 |                                     },
1118 |                                     "textAlign": "center",
1119 |                                     "altText": "",
1120 |                                     "action": {
1121 |                                         "name": "web",
1122 |                                         "values": {
1123 |                                             "href": "",
1124 |                                             "target": "_blank"
1125 |                                         }
1126 |                                     },
1127 |                                     "hideDesktop": false,
1128 |                                     "displayCondition": null,
1129 |                                     "_meta": {
1130 |                                         "htmlID": "u_content_image_8",
1131 |                                         "htmlClassNames": "u_content_image"
1132 |                                     },
1133 |                                     "selectable": true,
1134 |                                     "draggable": true,
1135 |                                     "duplicatable": true,
1136 |                                     "deletable": true,
1137 |                                     "hideable": true
1138 |                                 }
1139 |                             }
1140 |                         ],
1141 |                         "values": {
1142 |                             "_meta": {
1143 |                                 "htmlID": "u_column_9",
1144 |                                 "htmlClassNames": "u_column"
1145 |                             },
1146 |                             "border": {
1147 |                                 "borderTopColor": "#CCC",
1148 |                                 "borderTopStyle": "solid",
1149 |                                 "borderTopWidth": "0px",
1150 |                                 "borderLeftColor": "#1d1d1f",
1151 |                                 "borderLeftStyle": "solid",
1152 |                                 "borderLeftWidth": "5px",
1153 |                                 "borderRightColor": "#CCC",
1154 |                                 "borderRightStyle": "solid",
1155 |                                 "borderRightWidth": "0px",
1156 |                                 "borderBottomColor": "#CCC",
1157 |                                 "borderBottomStyle": "solid",
1158 |                                 "borderBottomWidth": "0px"
1159 |                             },
1160 |                             "padding": "33px 0px 0px",
1161 |                             "_override": {
1162 |                                 "mobile": {
1163 |                                     "border": {
1164 |                                         "borderTopColor": "#CCC",
1165 |                                         "borderTopStyle": "solid",
1166 |                                         "borderTopWidth": "0px",
1167 |                                         "borderLeftColor": "#CCC",
1168 |                                         "borderLeftStyle": "solid",
1169 |                                         "borderLeftWidth": "0px",
1170 |                                         "borderRightColor": "#CCC",
1171 |                                         "borderRightStyle": "solid",
1172 |                                         "borderRightWidth": "0px",
1173 |                                         "borderBottomColor": "#CCC",
1174 |                                         "borderBottomStyle": "solid",
1175 |                                         "borderBottomWidth": "0px"
1176 |                                     }
1177 |                                 }
1178 |                             },
1179 |                             "borderRadius": "0px",
1180 |                             "backgroundColor": ""
1181 |                         }
1182 |                     }
1183 |                 ],
1184 |                 "values": {
1185 |                     "displayCondition": null,
1186 |                     "columns": false,
1187 |                     "backgroundColor": "#1d1d1f",
1188 |                     "columnsBackgroundColor": "#000000",
1189 |                     "backgroundImage": {
1190 |                         "url": "",
1191 |                         "fullWidth": true,
1192 |                         "repeat": "no-repeat",
1193 |                         "size": "custom",
1194 |                         "position": "center"
1195 |                     },
1196 |                     "padding": "5px",
1197 |                     "anchor": "",
1198 |                     "hideDesktop": false,
1199 |                     "_meta": {
1200 |                         "htmlID": "u_row_6",
1201 |                         "htmlClassNames": "u_row"
1202 |                     },
1203 |                     "selectable": true,
1204 |                     "draggable": true,
1205 |                     "duplicatable": true,
1206 |                     "deletable": true,
1207 |                     "hideable": true
1208 |                 }
1209 |             },
1210 |             {
1211 |                 "id": "GyxkKaDoVf",
1212 |                 "cells": [
1213 |                     1,
1214 |                     1
1215 |                 ],
1216 |                 "columns": [
1217 |                     {
1218 |                         "id": "_QiC12awFa",
1219 |                         "contents": [
1220 |                             {
1221 |                                 "id": "S_hqZ7HMSl",
1222 |                                 "type": "image",
1223 |                                 "values": {
1224 |                                     "containerPadding": "0px",
1225 |                                     "anchor": "",
1226 |                                     "src": {
1227 |                                         "url": "https://assets.unlayer.com/projects/139/1676496501021-specialist_2x.jpg",
1228 |                                         "width": 712,
1229 |                                         "height": 550
1230 |                                     },
1231 |                                     "textAlign": "center",
1232 |                                     "altText": "",
1233 |                                     "action": {
1234 |                                         "name": "web",
1235 |                                         "values": {
1236 |                                             "href": "",
1237 |                                             "target": "_blank"
1238 |                                         }
1239 |                                     },
1240 |                                     "hideDesktop": false,
1241 |                                     "displayCondition": null,
1242 |                                     "_meta": {
1243 |                                         "htmlID": "u_content_image_6",
1244 |                                         "htmlClassNames": "u_content_image"
1245 |                                     },
1246 |                                     "selectable": true,
1247 |                                     "draggable": true,
1248 |                                     "duplicatable": true,
1249 |                                     "deletable": true,
1250 |                                     "hideable": true
1251 |                                 }
1252 |                             }
1253 |                         ],
1254 |                         "values": {
1255 |                             "_meta": {
1256 |                                 "htmlID": "u_column_12",
1257 |                                 "htmlClassNames": "u_column"
1258 |                             },
1259 |                             "border": {},
1260 |                             "padding": "0px",
1261 |                             "borderRadius": "0px",
1262 |                             "backgroundColor": ""
1263 |                         }
1264 |                     },
1265 |                     {
1266 |                         "id": "tBvHHdYsbP",
1267 |                         "contents": [
1268 |                             {
1269 |                                 "id": "YBq_C6WCxM",
1270 |                                 "type": "text",
1271 |                                 "values": {
1272 |                                     "containerPadding": "10px",
1273 |                                     "anchor": "",
1274 |                                     "fontSize": "24px",
1275 |                                     "textAlign": "center",
1276 |                                     "lineHeight": "120%",
1277 |                                     "linkStyle": {
1278 |                                         "inherit": true,
1279 |                                         "linkColor": "#0000ee",
1280 |                                         "linkHoverColor": "#0000ee",
1281 |                                         "linkUnderline": true,
1282 |                                         "linkHoverUnderline": true
1283 |                                     },
1284 |                                     "hideDesktop": false,
1285 |                                     "displayCondition": null,
1286 |                                     "_meta": {
1287 |                                         "htmlID": "u_content_text_18",
1288 |                                         "htmlClassNames": "u_content_text"
1289 |                                     },
1290 |                                     "selectable": true,
1291 |                                     "draggable": true,
1292 |                                     "duplicatable": true,
1293 |                                     "deletable": true,
1294 |                                     "hideable": true,
1295 |                                     "text": "<p style=\"line-height: 120%;\">Shop one on one with</p>\n<p style=\"line-height: 120%;\">a Mac Specialist.</p>"
1296 |                                 }
1297 |                             },
1298 |                             {
1299 |                                 "id": "0DF1Wlu-f8",
1300 |                                 "type": "text",
1301 |                                 "values": {
1302 |                                     "containerPadding": "10px",
1303 |                                     "anchor": "",
1304 |                                     "textAlign": "center",
1305 |                                     "lineHeight": "150%",
1306 |                                     "linkStyle": {
1307 |                                         "inherit": true,
1308 |                                         "linkColor": "#0000ee",
1309 |                                         "linkHoverColor": "#0000ee",
1310 |                                         "linkUnderline": true,
1311 |                                         "linkHoverUnderline": true
1312 |                                     },
1313 |                                     "hideDesktop": false,
1314 |                                     "displayCondition": null,
1315 |                                     "_meta": {
1316 |                                         "htmlID": "u_content_text_19",
1317 |                                         "htmlClassNames": "u_content_text"
1318 |                                     },
1319 |                                     "selectable": true,
1320 |                                     "draggable": true,
1321 |                                     "duplicatable": true,
1322 |                                     "deletable": true,
1323 |                                     "hideable": true,
1324 |                                     "text": "<p style=\"line-height: 150%;\">Our Specialists can help you choose, configure, and buy the perfect Mac.</p>"
1325 |                                 }
1326 |                             },
1327 |                             {
1328 |                                 "id": "3PX82nq2MS",
1329 |                                 "type": "text",
1330 |                                 "values": {
1331 |                                     "containerPadding": "10px",
1332 |                                     "anchor": "",
1333 |                                     "fontSize": "14px",
1334 |                                     "color": "#0071e3",
1335 |                                     "textAlign": "center",
1336 |                                     "lineHeight": "140%",
1337 |                                     "linkStyle": {
1338 |                                         "inherit": true,
1339 |                                         "linkColor": "#0000ee",
1340 |                                         "linkHoverColor": "#0000ee",
1341 |                                         "linkUnderline": true,
1342 |                                         "linkHoverUnderline": true
1343 |                                     },
1344 |                                     "hideDesktop": false,
1345 |                                     "displayCondition": null,
1346 |                                     "_meta": {
1347 |                                         "htmlID": "u_content_text_20",
1348 |                                         "htmlClassNames": "u_content_text"
1349 |                                     },
1350 |                                     "selectable": true,
1351 |                                     "draggable": true,
1352 |                                     "duplicatable": true,
1353 |                                     "deletable": true,
1354 |                                     "hideable": true,
1355 |                                     "text": "<p style=\"line-height: 140%;\">Find a store</p>"
1356 |                                 }
1357 |                             }
1358 |                         ],
1359 |                         "values": {
1360 |                             "_meta": {
1361 |                                 "htmlID": "u_column_13",
1362 |                                 "htmlClassNames": "u_column"
1363 |                             },
1364 |                             "border": {},
1365 |                             "padding": "33px",
1366 |                             "borderRadius": "0px",
1367 |                             "backgroundColor": ""
1368 |                         }
1369 |                     }
1370 |                 ],
1371 |                 "values": {
1372 |                     "displayCondition": null,
1373 |                     "columns": false,
1374 |                     "backgroundColor": "#1d1d1f",
1375 |                     "columnsBackgroundColor": "#000000",
1376 |                     "backgroundImage": {
1377 |                         "url": "",
1378 |                         "fullWidth": true,
1379 |                         "repeat": "no-repeat",
1380 |                         "size": "custom",
1381 |                         "position": "center"
1382 |                     },
1383 |                     "padding": "5px",
1384 |                     "anchor": "",
1385 |                     "hideDesktop": false,
1386 |                     "_meta": {
1387 |                         "htmlID": "u_row_8",
1388 |                         "htmlClassNames": "u_row"
1389 |                     },
1390 |                     "selectable": true,
1391 |                     "draggable": true,
1392 |                     "duplicatable": true,
1393 |                     "deletable": true,
1394 |                     "hideable": true
1395 |                 }
1396 |             },
1397 |             {
1398 |                 "id": "he9WBb_LIA",
1399 |                 "cells": [
1400 |                     1
1401 |                 ],
1402 |                 "columns": [
1403 |                     {
1404 |                         "id": "9KxIY1TsoO",
1405 |                         "contents": [
1406 |                             {
1407 |                                 "id": "TJ6qaeBuzl",
1408 |                                 "type": "menu",
1409 |                                 "values": {
1410 |                                     "containerPadding": "5px",
1411 |                                     "anchor": "",
1412 |                                     "menu": {
1413 |                                         "items": [
1414 |                                             {
1415 |                                                 "key": "1676496571373",
1416 |                                                 "link": {
1417 |                                                     "name": "web",
1418 |                                                     "attrs": {
1419 |                                                         "href": "{{href}}",
1420 |                                                         "target": "{{target}}"
1421 |                                                     },
1422 |                                                     "values": {
1423 |                                                         "href": "https://www.apple.com/",
1424 |                                                         "target": "_self"
1425 |                                                     }
1426 |                                                 },
1427 |                                                 "text": "Shop Online"
1428 |                                             },
1429 |                                             {
1430 |                                                 "key": "1676496577930",
1431 |                                                 "link": {
1432 |                                                     "name": "web",
1433 |                                                     "attrs": {
1434 |                                                         "href": "{{href}}",
1435 |                                                         "target": "{{target}}"
1436 |                                                     },
1437 |                                                     "values": {
1438 |                                                         "href": "https://www.apple.com/",
1439 |                                                         "target": "_self"
1440 |                                                     }
1441 |                                                 },
1442 |                                                 "text": "Find a Store"
1443 |                                             },
1444 |                                             {
1445 |                                                 "key": "1676496581406",
1446 |                                                 "link": {
1447 |                                                     "name": "web",
1448 |                                                     "attrs": {
1449 |                                                         "href": "{{href}}",
1450 |                                                         "target": "{{target}}"
1451 |                                                     },
1452 |                                                     "values": {
1453 |                                                         "href": "https://www.apple.com/",
1454 |                                                         "target": "_self"
1455 |                                                     }
1456 |                                                 },
1457 |                                                 "text": "1-800-MY-APPLE"
1458 |                                             },
1459 |                                             {
1460 |                                                 "key": "1676496588057",
1461 |                                                 "link": {
1462 |                                                     "name": "web",
1463 |                                                     "attrs": {
1464 |                                                         "href": "{{href}}",
1465 |                                                         "target": "{{target}}"
1466 |                                                     },
1467 |                                                     "values": {
1468 |                                                         "href": "https://www.apple.com/",
1469 |                                                         "target": "_self"
1470 |                                                     }
1471 |                                                 },
1472 |                                                 "text": "Get the Apple Store App"
1473 |                                             }
1474 |                                         ]
1475 |                                     },
1476 |                                     "fontSize": "14px",
1477 |                                     "textColor": "#424245",
1478 |                                     "linkColor": "#d2d2d7",
1479 |                                     "align": "center",
1480 |                                     "layout": "horizontal",
1481 |                                     "separator": "|",
1482 |                                     "padding": "5px 10px",
1483 |                                     "hideDesktop": false,
1484 |                                     "displayCondition": null,
1485 |                                     "_meta": {
1486 |                                         "htmlID": "u_content_menu_1",
1487 |                                         "htmlClassNames": "u_content_menu"
1488 |                                     },
1489 |                                     "selectable": true,
1490 |                                     "draggable": true,
1491 |                                     "duplicatable": true,
1492 |                                     "deletable": true,
1493 |                                     "hideable": true,
1494 |                                     "_override": {
1495 |                                         "mobile": {
1496 |                                             "layout": "vertical"
1497 |                                         }
1498 |                                     }
1499 |                                 }
1500 |                             },
1501 |                             {
1502 |                                 "id": "mNBB5zCn71",
1503 |                                 "type": "divider",
1504 |                                 "values": {
1505 |                                     "width": "100%",
1506 |                                     "border": {
1507 |                                         "borderTopWidth": "1px",
1508 |                                         "borderTopStyle": "solid",
1509 |                                         "borderTopColor": "#424245"
1510 |                                     },
1511 |                                     "textAlign": "center",
1512 |                                     "containerPadding": "10px",
1513 |                                     "anchor": "",
1514 |                                     "hideDesktop": false,
1515 |                                     "displayCondition": null,
1516 |                                     "_meta": {
1517 |                                         "htmlID": "u_content_divider_1",
1518 |                                         "htmlClassNames": "u_content_divider"
1519 |                                     },
1520 |                                     "selectable": true,
1521 |                                     "draggable": true,
1522 |                                     "duplicatable": true,
1523 |                                     "deletable": true,
1524 |                                     "hideable": true
1525 |                                 }
1526 |                             },
1527 |                             {
1528 |                                 "id": "bo4vg76emo",
1529 |                                 "type": "text",
1530 |                                 "values": {
1531 |                                     "containerPadding": "10px",
1532 |                                     "anchor": "",
1533 |                                     "fontSize": "12px",
1534 |                                     "color": "#86868b",
1535 |                                     "textAlign": "left",
1536 |                                     "lineHeight": "200%",
1537 |                                     "linkStyle": {
1538 |                                         "inherit": false,
1539 |                                         "linkColor": "#d2d2d7",
1540 |                                         "linkHoverColor": "#0000ee",
1541 |                                         "linkUnderline": false,
1542 |                                         "linkHoverUnderline": true,
1543 |                                         "body": false
1544 |                                     },
1545 |                                     "hideDesktop": false,
1546 |                                     "displayCondition": null,
1547 |                                     "_meta": {
1548 |                                         "htmlID": "u_content_text_17",
1549 |                                         "htmlClassNames": "u_content_text"
1550 |                                     },
1551 |                                     "selectable": true,
1552 |                                     "draggable": true,
1553 |                                     "duplicatable": true,
1554 |                                     "deletable": true,
1555 |                                     "hideable": true,
1556 |                                     "text": "<p style=\"line-height: 200%;\">If you reside in the U.S. territories, please call Goldman Sachs at 877-255-5923 with questions about Apple Card.</p>\n<p style=\"line-height: 200%;\">TM and © 2023 Apple Inc. One Apple Park Way, MS 96-DM, Cupertino, CA 95014.</p>\n<p style=\"line-height: 200%;\"><a rel=\"noopener\" href=\"https://www.apple.com/\" target=\"_blank\" data-u-link-value=\"eyJuYW1lIjoid2ViIiwiYXR0cnMiOnsiaHJlZiI6Int7aHJlZn19IiwidGFyZ2V0Ijoie3t0YXJnZXR9fSJ9LCJ2YWx1ZXMiOnsiaHJlZiI6Imh0dHBzOi8vd3d3LmFwcGxlLmNvbS8iLCJ0YXJnZXQiOiJfYmxhbmsifX0=\">All Rights Reserved</a>    |   <a rel=\"noopener\" href=\"https://www.apple.com/\" target=\"_blank\" data-u-link-value=\"eyJuYW1lIjoid2ViIiwiYXR0cnMiOnsiaHJlZiI6Int7aHJlZn19IiwidGFyZ2V0Ijoie3t0YXJnZXR9fSJ9LCJ2YWx1ZXMiOnsiaHJlZiI6Imh0dHBzOi8vd3d3LmFwcGxlLmNvbS8iLCJ0YXJnZXQiOiJfYmxhbmsifX0=\">Privacy Policy</a>    |   <a rel=\"noopener\" href=\"https://www.apple.com/\" target=\"_blank\" data-u-link-value=\"eyJuYW1lIjoid2ViIiwiYXR0cnMiOnsiaHJlZiI6Int7aHJlZn19IiwidGFyZ2V0Ijoie3t0YXJnZXR9fSJ9LCJ2YWx1ZXMiOnsiaHJlZiI6Imh0dHBzOi8vd3d3LmFwcGxlLmNvbS8iLCJ0YXJnZXQiOiJfYmxhbmsifX0=\">My Apple ID</a></p>\n<p style=\"line-height: 200%;\">If you prefer not to receive commercial email from Apple, or if you’ve changed your email address, please <a rel=\"noopener\" href=\"https://www.apple.com/\" target=\"_blank\" data-u-link-value=\"eyJuYW1lIjoid2ViIiwiYXR0cnMiOnsiaHJlZiI6Int7aHJlZn19IiwidGFyZ2V0Ijoie3t0YXJnZXR9fSJ9LCJ2YWx1ZXMiOnsiaHJlZiI6Imh0dHBzOi8vd3d3LmFwcGxlLmNvbS8iLCJ0YXJnZXQiOiJfYmxhbmsifX0=\">click here</a>.</p>"
1557 |                                 }
1558 |                             }
1559 |                         ],
1560 |                         "values": {
1561 |                             "_meta": {
1562 |                                 "htmlID": "u_column_10",
1563 |                                 "htmlClassNames": "u_column"
1564 |                             },
1565 |                             "border": {},
1566 |                             "padding": "0px 30px",
1567 |                             "borderRadius": "0px",
1568 |                             "backgroundColor": ""
1569 |                         }
1570 |                     }
1571 |                 ],
1572 |                 "values": {
1573 |                     "displayCondition": null,
1574 |                     "columns": false,
1575 |                     "backgroundColor": "#1d1d1f",
1576 |                     "columnsBackgroundColor": "",
1577 |                     "backgroundImage": {
1578 |                         "url": "",
1579 |                         "fullWidth": true,
1580 |                         "repeat": "no-repeat",
1581 |                         "size": "custom",
1582 |                         "position": "center"
1583 |                     },
1584 |                     "padding": "10px 10px 50px",
1585 |                     "anchor": "",
1586 |                     "hideDesktop": false,
1587 |                     "_meta": {
1588 |                         "htmlID": "u_row_7",
1589 |                         "htmlClassNames": "u_row"
1590 |                     },
1591 |                     "selectable": true,
1592 |                     "draggable": true,
1593 |                     "duplicatable": true,
1594 |                     "deletable": true,
1595 |                     "hideable": true
1596 |                 }
1597 |             }
1598 |         ],
1599 |         "values": {
1600 |             "popupPosition": "center",
1601 |             "popupWidth": "600px",
1602 |             "popupHeight": "auto",
1603 |             "borderRadius": "10px",
1604 |             "contentAlign": "center",
1605 |             "contentVerticalAlign": "center",
1606 |             "contentWidth": 700,
1607 |             "fontFamily": {
1608 |                 "label": "Helvetica",
1609 |                 "value": "helvetica,sans-serif",
1610 |                 "url": "",
1611 |                 "weights": null,
1612 |                 "defaultFont": true
1613 |             },
1614 |             "textColor": "#ffffff",
1615 |             "popupBackgroundColor": "#FFFFFF",
1616 |             "popupBackgroundImage": {
1617 |                 "url": "",
1618 |                 "fullWidth": true,
1619 |                 "repeat": "no-repeat",
1620 |                 "size": "cover",
1621 |                 "position": "center"
1622 |             },
1623 |             "popupOverlay_backgroundColor": "rgba(0, 0, 0, 0.1)",
1624 |             "popupCloseButton_position": "top-right",
1625 |             "popupCloseButton_backgroundColor": "#DDDDDD",
1626 |             "popupCloseButton_iconColor": "#000000",
1627 |             "popupCloseButton_borderRadius": "0px",
1628 |             "popupCloseButton_margin": "0px",
1629 |             "popupCloseButton_action": {
1630 |                 "name": "close_popup",
1631 |                 "attrs": {
1632 |                     "onClick": "document.querySelector('.u-popup-container').style.display = 'none';"
1633 |                 }
1634 |             },
1635 |             "backgroundColor": "#000000",
1636 |             "backgroundImage": {
1637 |                 "url": "",
1638 |                 "fullWidth": true,
1639 |                 "repeat": "no-repeat",
1640 |                 "size": "custom",
1641 |                 "position": "center"
1642 |             },
1643 |             "preheaderText": "",
1644 |             "linkStyle": {
1645 |                 "body": true,
1646 |                 "linkColor": "#0071e3",
1647 |                 "linkHoverColor": "#0000ee",
1648 |                 "linkUnderline": true,
1649 |                 "linkHoverUnderline": true,
1650 |                 "inherit": false
1651 |             },
1652 |             "_meta": {
1653 |                 "htmlID": "u_body",
1654 |                 "htmlClassNames": "u_body"
1655 |             }
1656 |         },
1657 |         "headers": [],
1658 |         "footers": []
1659 |     },
1660 |     "schemaVersion": 12
1661 | }


--------------------------------------------------------------------------------