├── .nvmrc ├── demo ├── .npmignore ├── src │ ├── dashboard │ │ ├── DesignList.tsx │ │ ├── index.tsx │ │ └── DesignEdit.tsx │ └── example │ │ ├── index.tsx │ │ └── sample.json ├── index.html ├── tsconfig.json ├── package.json └── index.tsx ├── .gitignore ├── prettier.config.js ├── src ├── index.ts ├── loadScript.ts ├── types.ts └── EmailEditor.tsx ├── .travis.yml ├── test └── index.test.tsx ├── tsdx.config.js ├── tsconfig.json ├── CONTRIBUTING.md ├── LICENSE ├── package.json └── README.md /.nvmrc: -------------------------------------------------------------------------------- 1 | v16.13.0 2 | -------------------------------------------------------------------------------- /demo/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | dist -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | .cache 5 | .history 6 | dist 7 | /coverage -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: true, 3 | arrowParens: 'always', 4 | trailingComma: 'es5', 5 | }; 6 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { EmailEditor } from './EmailEditor'; 2 | 3 | export * from './types'; 4 | export { EmailEditor, EmailEditor as default }; 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | 3 | language: node_js 4 | node_js: 5 | - 6 6 | 7 | before_install: 8 | - npm install codecov.io coveralls 9 | 10 | after_success: 11 | - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js 12 | - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js 13 | 14 | branches: 15 | only: 16 | - master 17 | -------------------------------------------------------------------------------- /demo/src/dashboard/DesignList.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | 4 | const DesignList = () => { 5 | return ( 6 |
7 |

My Designs

8 | 9 |

10 | New Design 11 |

12 |
13 | ); 14 | }; 15 | 16 | export default DesignList; 17 | -------------------------------------------------------------------------------- /test/index.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import Editor from '../src'; 4 | 5 | it('should render editor without crashing', async () => { 6 | const ref = { 7 | current: null, 8 | }; 9 | 10 | render(); 11 | 12 | const container = document.querySelector('#editor-1'); 13 | 14 | expect(container).toBeTruthy(); 15 | }); 16 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React Email Editor Playground 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo/src/dashboard/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Routes, Route } from 'react-router-dom'; 3 | 4 | import DesignList from './DesignList'; 5 | import DesignEdit from './DesignEdit'; 6 | 7 | const Dashboard = () => { 8 | return ( 9 | 10 | } /> 11 | } /> 12 | } /> 13 | 14 | ); 15 | }; 16 | 17 | export default Dashboard; 18 | -------------------------------------------------------------------------------- /demo/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "target": "es5", 5 | "module": "commonjs", 6 | "jsx": "react", 7 | "moduleResolution": "node", 8 | "noImplicitAny": false, 9 | "esModuleInterop": true, 10 | "noUnusedLocals": false, 11 | "noUnusedParameters": false, 12 | "removeComments": true, 13 | "strictNullChecks": true, 14 | "preserveConstEnums": true, 15 | "sourceMap": true, 16 | "lib": ["es2015", "es2016", "dom"], 17 | "types": ["node"], 18 | "resolveJsonModule": true 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /tsdx.config.js: -------------------------------------------------------------------------------- 1 | const copy = require('rollup-plugin-copy'); 2 | const replace = require('@rollup/plugin-replace'); 3 | 4 | module.exports = { 5 | rollup(config, opts) { 6 | config.plugins = config.plugins.map((p) => 7 | p.name === 'replace' 8 | ? replace({ 9 | 'process.env.NODE_ENV': JSON.stringify(opts.env), 10 | preventAssignment: true, 11 | }) 12 | : p 13 | ); 14 | 15 | config.plugins.push( 16 | copy({ 17 | targets: [{ src: 'src/*.d.ts', dest: 'dist/' }], 18 | }) 19 | ); 20 | 21 | return config; 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src"], 3 | "compilerOptions": { 4 | "module": "esnext", 5 | "lib": ["dom", "esnext"], 6 | "importHelpers": true, 7 | "declaration": true, 8 | "sourceMap": true, 9 | "baseUrl": "src", 10 | "strict": true, 11 | "noImplicitReturns": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "noUnusedLocals": true, 14 | "noUnusedParameters": true, 15 | "moduleResolution": "node", 16 | "jsx": "react", 17 | "esModuleInterop": true, 18 | "skipLibCheck": true, 19 | "forceConsistentCasingInFileNames": true, 20 | "noEmit": true, 21 | "resolveJsonModule": true, 22 | "noImplicitAny": false 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-email-editor-demo", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "parcel index.html --port 3000", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": { 11 | "react": "^18.2.0", 12 | "react-app-polyfill": "^1.0.0", 13 | "react-dom": "^18.2.0", 14 | "react-is": "^18.2.0", 15 | "react-router-dom": "^6.8.0", 16 | "styled-components": "^5.3.6" 17 | }, 18 | "alias": { 19 | "react": "../node_modules/react", 20 | "react-dom": "../node_modules/react-dom", 21 | "scheduler/tracing": "../node_modules/scheduler/tracing-profiling" 22 | }, 23 | "devDependencies": { 24 | "@types/react": "^16.9.11", 25 | "@types/react-dom": "^16.8.4", 26 | "parcel": "1.12.3", 27 | "typescript": "^3.4.5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Prerequisites 2 | 3 | [Node.js](http://nodejs.org/) >= v10 must be installed. 4 | 5 | ## Installation 6 | 7 | - Running `npm install` in the components's root directory will install everything you need for development. 8 | - Running `npm install` in the `demo` directory will install everything you need to run a demo app locally. 9 | 10 | ## Demo Development Server 11 | 12 | - `npm start` from `demo` directory will run the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading. 13 | 14 | ## Running Tests 15 | 16 | - `npm test` will run the tests once. 17 | 18 | - `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`. 19 | 20 | - `npm run test:watch` will run the tests on every change. 21 | 22 | ## Building 23 | 24 | - `npm run build` will build the component for publishing to npm. 25 | - `npm run build` in the `demo` directory will build the demo app. 26 | -------------------------------------------------------------------------------- /demo/index.tsx: -------------------------------------------------------------------------------- 1 | import 'react-app-polyfill/ie11'; 2 | import * as React from 'react'; 3 | import ReactDOM from 'react-dom/client'; 4 | import { createGlobalStyle } from 'styled-components'; 5 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; 6 | 7 | import Example from './src/example'; 8 | import Dashboard from './src/dashboard'; 9 | 10 | const GlobalStyle = createGlobalStyle` 11 | html, body { 12 | margin: 0; 13 | padding: 0; 14 | height: 100%; 15 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 16 | } 17 | 18 | #root { 19 | height: 100%; 20 | } 21 | `; 22 | 23 | const App = () => { 24 | return ( 25 | 26 | 27 | 28 | } /> 29 | } /> 30 | 31 | 32 | ); 33 | }; 34 | 35 | const root = ReactDOM.createRoot(document.getElementById('root')!); 36 | root.render(); 37 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Unlayer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/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/types.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import { CSSProperties } from 'react'; 4 | 5 | import Embed from 'embed/index'; 6 | import { Editor as EditorClass } from 'embed/Editor'; 7 | import { AppearanceConfig, DisplayMode, ToolsConfig } from 'state/types/types'; 8 | 9 | export type Unlayer = typeof Embed; 10 | export type UnlayerOptions = Parameters[0]; 11 | export type Editor = InstanceType; 12 | 13 | export interface EditorRef { 14 | editor: Editor | null; 15 | } 16 | 17 | export interface EmailEditorProps { 18 | editorId?: string | undefined; 19 | minHeight?: number | string | undefined; 20 | onLoad?(unlayer: Editor): void; 21 | onReady?(unlayer: Editor): void; 22 | options?: UnlayerOptions | undefined; 23 | scriptUrl?: string | undefined; 24 | style?: CSSProperties | undefined; 25 | 26 | // redundant props -- already available in options 27 | /** @deprecated */ 28 | appearance?: AppearanceConfig | undefined; 29 | /** @deprecated */ 30 | displayMode?: DisplayMode; 31 | /** @deprecated */ 32 | locale?: string | undefined; 33 | /** @deprecated */ 34 | projectId?: number | undefined; 35 | /** @deprecated */ 36 | tools?: ToolsConfig | undefined; 37 | } 38 | 39 | declare global { 40 | const unlayer: Unlayer; 41 | 42 | interface Window { 43 | __unlayer_lastEditorId: number; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-email-editor", 3 | "version": "1.7.11", 4 | "description": "Unlayer's Email Editor Component for React.js", 5 | "main": "dist/index.js", 6 | "typings": "dist/index.d.ts", 7 | "files": [ 8 | "dist" 9 | ], 10 | "engines": { 11 | "node": ">=10" 12 | }, 13 | "scripts": { 14 | "start": "tsdx watch", 15 | "build": "tsdx build", 16 | "test": "tsdx test", 17 | "test:watch": "tsdx test --watch", 18 | "test:coverage": "tsdx test --coverage", 19 | "lint": "tsdx lint", 20 | "prepare": "tsdx build", 21 | "release": "npm run build && npm publish", 22 | "netlify-build": "cd demo && npm install && npm run build" 23 | }, 24 | "peerDependencies": { 25 | "react": ">=15" 26 | }, 27 | "husky": { 28 | "hooks": { 29 | "pre-commit": "tsdx lint" 30 | } 31 | }, 32 | "dependencies": { 33 | "unlayer-types": "latest" 34 | }, 35 | "devDependencies": { 36 | "@rollup/plugin-replace": "^5.0.2", 37 | "@testing-library/react": "^13.4.0", 38 | "@types/react": "^18.0.27", 39 | "@types/react-dom": "^18.0.10", 40 | "husky": "^8.0.3", 41 | "react": "^18.2.0", 42 | "react-dom": "^18.2.0", 43 | "rollup-plugin-copy": "^3.4.0", 44 | "tsdx": "^0.14.1", 45 | "tslib": "^2.4.1", 46 | "typescript": "^4.9.4" 47 | }, 48 | "author": "", 49 | "homepage": "https://github.com/unlayer/react-email-editor#readme", 50 | "license": "MIT", 51 | "repository": "https://github.com/unlayer/react-email-editor.git", 52 | "keywords": [ 53 | "react-component" 54 | ] 55 | } 56 | -------------------------------------------------------------------------------- /demo/src/dashboard/DesignEdit.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | import styled from 'styled-components'; 3 | import { Link } from 'react-router-dom'; 4 | 5 | import EmailEditor, { EditorRef } from '../../../src'; // use react-email-editor instead 6 | 7 | const Container = styled.div` 8 | display: flex; 9 | flex-direction: column; 10 | position: relative; 11 | height: 100%; 12 | `; 13 | 14 | const Bar = styled.div` 15 | flex: 1; 16 | background-color: #61dafb; 17 | color: #000; 18 | padding: 10px; 19 | display: flex; 20 | max-height: 40px; 21 | 22 | h1 { 23 | flex: 1; 24 | font-size: 16px; 25 | text-align: left; 26 | } 27 | 28 | button { 29 | flex: 1; 30 | padding: 10px; 31 | margin-left: 10px; 32 | font-size: 14px; 33 | font-weight: bold; 34 | background-color: #000; 35 | color: #fff; 36 | border: 0px; 37 | max-width: 150px; 38 | cursor: pointer; 39 | } 40 | 41 | a { 42 | flex: 1; 43 | padding: 10px; 44 | margin-left: 10px; 45 | font-size: 14px; 46 | font-weight: bold; 47 | color: #fff; 48 | border: 0px; 49 | cursor: pointer; 50 | text-align: right; 51 | text-decoration: none; 52 | line-height: 160%; 53 | } 54 | `; 55 | 56 | const DesignEdit = () => { 57 | const emailEditorRef = useRef(null); 58 | 59 | const saveDesign = () => { 60 | const unlayer = emailEditorRef.current?.editor; 61 | 62 | unlayer?.saveDesign((design) => { 63 | console.log('saveDesign', design); 64 | alert('Design JSON has been logged in your developer console.'); 65 | }); 66 | }; 67 | 68 | const exportHtml = () => { 69 | const unlayer = emailEditorRef.current?.editor; 70 | 71 | unlayer?.exportHtml((data) => { 72 | const { html } = data; 73 | console.log('exportHtml', html); 74 | alert('Output HTML has been logged in your developer console.'); 75 | }); 76 | }; 77 | 78 | return ( 79 | 80 | 81 |

React Email Editor (Demo)

82 | 83 | Dashboard 84 | 85 | 86 | 87 | 88 | 97 | 98 | ); 99 | }; 100 | 101 | export default DesignEdit; 102 | -------------------------------------------------------------------------------- /src/EmailEditor.tsx: -------------------------------------------------------------------------------- 1 | import React, { 2 | useEffect, 3 | useState, 4 | useImperativeHandle, 5 | useMemo, 6 | } from 'react'; 7 | 8 | import pkg from '../package.json'; 9 | import { Editor, EditorRef, EmailEditorProps } from './types'; 10 | import { loadScript } from './loadScript'; 11 | 12 | const win = typeof window === 'undefined' ? { __unlayer_lastEditorId: 0 } : window 13 | win.__unlayer_lastEditorId = win.__unlayer_lastEditorId || 0; 14 | 15 | export const EmailEditor = React.forwardRef( 16 | (props, ref) => { 17 | const { onLoad, onReady, scriptUrl, minHeight = 500, style = {} } = props; 18 | 19 | const [editor, setEditor] = useState(null); 20 | 21 | const [hasLoadedEmbedScript, setHasLoadedEmbedScript] = useState(false); 22 | 23 | const editorId = useMemo( 24 | () => props.editorId || `editor-${++win.__unlayer_lastEditorId}`, 25 | [props.editorId] 26 | ); 27 | 28 | const options: EmailEditorProps['options'] = { 29 | ...(props.options || {}), 30 | appearance: props.appearance ?? props.options?.appearance, 31 | displayMode: props?.displayMode || props.options?.displayMode || 'email', 32 | locale: props.locale ?? props.options?.locale, 33 | projectId: props.projectId ?? props.options?.projectId, 34 | tools: props.tools ?? props.options?.tools, 35 | 36 | id: editorId, 37 | source: { 38 | name: pkg.name, 39 | version: pkg.version, 40 | }, 41 | }; 42 | 43 | useImperativeHandle( 44 | ref, 45 | () => ({ 46 | editor, 47 | }), 48 | [editor] 49 | ); 50 | 51 | useEffect(() => { 52 | return () => { 53 | editor?.destroy(); 54 | }; 55 | }, []); 56 | 57 | useEffect(() => { 58 | setHasLoadedEmbedScript(false); 59 | loadScript(() => setHasLoadedEmbedScript(true), scriptUrl); 60 | }, [scriptUrl]); 61 | 62 | useEffect(() => { 63 | if (!hasLoadedEmbedScript) return; 64 | editor?.destroy(); 65 | setEditor(unlayer.createEditor(options)); 66 | }, [JSON.stringify(options), hasLoadedEmbedScript]); 67 | 68 | const methodProps = Object.keys(props).filter((propName) => 69 | /^on/.test(propName) 70 | ); 71 | useEffect(() => { 72 | if (!editor) return; 73 | 74 | onLoad?.(editor); 75 | 76 | // All properties starting with on[Name] are registered as event listeners. 77 | methodProps.forEach((methodProp) => { 78 | if ( 79 | /^on/.test(methodProp) && 80 | methodProp !== 'onLoad' && 81 | methodProp !== 'onReady' && 82 | typeof props[methodProp] === 'function' 83 | ) { 84 | editor.addEventListener(methodProp, props[methodProp]); 85 | } 86 | }); 87 | 88 | if (onReady) { 89 | editor.addEventListener('editor:ready', () => { 90 | onReady(editor); 91 | }); 92 | } 93 | }, [editor, Object.keys(methodProps).join(',')]); 94 | 95 | return ( 96 |
103 |
104 |
105 | ); 106 | } 107 | ); 108 | -------------------------------------------------------------------------------- /demo/src/example/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useState } from 'react'; 2 | import styled from 'styled-components'; 3 | 4 | import packageJson from '../../../package.json'; 5 | import EmailEditor, { EditorRef, EmailEditorProps } from '../../../src'; // use react-email-editor instead 6 | import sample from './sample.json'; 7 | 8 | const Container = styled.div` 9 | display: flex; 10 | flex-direction: column; 11 | position: relative; 12 | height: 100%; 13 | `; 14 | 15 | const Bar = styled.div` 16 | flex: 1; 17 | background-color: #61dafb; 18 | color: #000; 19 | padding: 10px; 20 | display: flex; 21 | max-height: 40px; 22 | 23 | h1 { 24 | flex: 1; 25 | font-size: 16px; 26 | text-align: left; 27 | } 28 | 29 | button { 30 | flex: 1; 31 | padding: 10px; 32 | margin-left: 10px; 33 | font-size: 14px; 34 | font-weight: bold; 35 | background-color: #000; 36 | color: #fff; 37 | border: 0px; 38 | max-width: 150px; 39 | cursor: pointer; 40 | } 41 | `; 42 | 43 | const Example = () => { 44 | const emailEditorRef = useRef(null); 45 | const [preview, setPreview] = useState(false); 46 | 47 | const saveDesign = () => { 48 | const unlayer = emailEditorRef.current?.editor; 49 | 50 | unlayer?.saveDesign((design) => { 51 | console.log('saveDesign', design); 52 | alert('Design JSON has been logged in your developer console.'); 53 | }); 54 | }; 55 | 56 | const exportHtml = () => { 57 | const unlayer = emailEditorRef.current?.editor; 58 | 59 | unlayer?.exportHtml((data) => { 60 | const { design, html } = data; 61 | console.log('exportHtml', html); 62 | alert('Output HTML has been logged in your developer console.'); 63 | }); 64 | }; 65 | 66 | const togglePreview = () => { 67 | const unlayer = emailEditorRef.current?.editor; 68 | 69 | if (preview) { 70 | unlayer?.hidePreview(); 71 | setPreview(false); 72 | } else { 73 | unlayer?.showPreview('desktop'); 74 | setPreview(true); 75 | } 76 | }; 77 | 78 | const onDesignLoad = (data) => { 79 | console.log('onDesignLoad', data); 80 | }; 81 | 82 | const onLoad: EmailEditorProps['onLoad'] = (unlayer) => { 83 | console.log('onLoad', unlayer); 84 | unlayer.addEventListener('design:loaded', onDesignLoad); 85 | unlayer.loadDesign(sample); 86 | }; 87 | 88 | const onReady: EmailEditorProps['onReady'] = (unlayer) => { 89 | console.log('onReady', unlayer); 90 | }; 91 | 92 | return ( 93 | 94 | 95 |

React Email Editor v{packageJson.version} (Demo) — (GitHub)

96 | 97 | 100 | 101 | 102 | 103 | 104 | 105 | 116 | 117 | 118 | ); 119 | }; 120 | 121 | export default Example; 122 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Email Editor 2 | 3 | The excellent drag-n-drop email editor by [Unlayer](https://unlayer.com/embed) as a [React.js](http://facebook.github.io/react) _wrapper component_. This is the most powerful and developer friendly visual email builder for your app. 4 | 5 | | Video Overview | 6 | | :-------------------------------------------------------------------------------------------------------------------------------: | 7 | | [![React 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://react-email-editor-demo.netlify.app/ ([Source Code](https://github.com/unlayer/react-email-editor/tree/master/demo/src)) 13 | 14 | ## Blog Post 15 | 16 | Here's a blog post with a quickstart guide: https://medium.com/unlayer-blog/creating-a-drag-n-drop-email-editor-with-react-db1e9eb42386 17 | 18 | ## Installation 19 | 20 | The easiest way to use React Email Editor is to install it from NPM and include it in your own React build process. 21 | 22 | ``` 23 | npm install react-email-editor --save 24 | ``` 25 | 26 | ## Usage 27 | 28 | Require the EmailEditor component and render it with JSX: 29 | 30 | ```javascript 31 | import React, { useRef } from 'react'; 32 | import { render } from 'react-dom'; 33 | 34 | import EmailEditor, { EditorRef, EmailEditorProps } from 'react-email-editor'; 35 | 36 | const App = (props) => { 37 | const emailEditorRef = useRef(null); 38 | 39 | const exportHtml = () => { 40 | const unlayer = emailEditorRef.current?.editor; 41 | 42 | unlayer?.exportHtml((data) => { 43 | const { design, html } = data; 44 | console.log('exportHtml', html); 45 | }); 46 | }; 47 | 48 | const onReady: EmailEditorProps['onReady'] = (unlayer) => { 49 | // editor is ready 50 | // you can load your template here; 51 | // the design json can be obtained by calling 52 | // unlayer.loadDesign(callback) or unlayer.exportHtml(callback) 53 | 54 | // const templateJson = { DESIGN JSON GOES HERE }; 55 | // unlayer.loadDesign(templateJson); 56 | }; 57 | 58 | return ( 59 |
60 |
61 | 62 |
63 | 64 | 65 |
66 | ); 67 | }; 68 | 69 | render(, document.getElementById('app')); 70 | ``` 71 | 72 | See the [example source](https://github.com/unlayer/react-email-editor/blob/master/demo/src/example/index.tsx) for a reference implementation. 73 | 74 | ### Methods 75 | 76 | All unlayer methods are available in the editor instance (`emailEditorRef.current.editor`). See the [Unlayer Docs](https://docs.unlayer.com/) for more information, or log the object in the console to explore it. Here are the most used ones: 77 | 78 | | method | params | description | 79 | | -------------- | ------------------- | ------------------------------------------------------- | 80 | | **loadDesign** | `Object data` | Takes the design JSON and loads it in the editor | 81 | | **saveDesign** | `Function callback` | Returns the design JSON in a callback function | 82 | | **exportHtml** | `Function callback` | Returns the design HTML and JSON in a callback function | 83 | 84 | ### Properties 85 | 86 | - `editorId` {`String`} HTML div id of the container where the editor will be embedded (optional) 87 | - `minHeight` {`String`} minimum height to initialize the editor with (default 500px) 88 | - `onLoad` {`Function`} called when the editor instance is created 89 | - `onReady` {`Function`} called when the editor has finished loading 90 | - `options` {`Object`} options passed to the Unlayer editor instance (default {}) 91 | - See the [Unlayer Docs](https://docs.unlayer.com/docs/getting-started#configuration-options) for all available options. 92 | - `style` {`Object`} style object for the editor container (default {}) 93 | 94 | ## Custom Tools 95 | 96 | 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) 97 | 98 | [![Custom Tools](https://unroll-assets.s3.amazonaws.com/custom_tools.png)](https://docs.unlayer.com/docs/custom-tools) 99 | 100 | ## Localization 101 | 102 | 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) 103 | 104 | ### License 105 | 106 | Copyright (c) 2024 Unlayer. [MIT](LICENSE) Licensed. 107 | -------------------------------------------------------------------------------- /demo/src/example/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 | "id": "-Pm2fEb9Wp", 16 | "cells": [1], 17 | "columns": [{ 18 | "id": "aREOk3UC4g", 19 | "contents": [{ 20 | "id": "hpEzy7mhvP", 21 | "type": "image", 22 | "values": { 23 | "containerPadding": "10px 10px 0px", 24 | "anchor": "", 25 | "src": { 26 | "url": "https://assets.unlayer.com/projects/139/1676495528722-apple_logo_circle_f5f5f7-000_2x.png", 27 | "width": 116, 28 | "height": 116, 29 | "maxWidth": "15%", 30 | "autoWidth": false 31 | }, 32 | "textAlign": "center", 33 | "altText": "", 34 | "action": { 35 | "name": "web", 36 | "values": { 37 | "href": "", 38 | "target": "_blank" 39 | } 40 | }, 41 | "hideDesktop": false, 42 | "displayCondition": null, 43 | "_meta": { 44 | "htmlID": "u_content_image_1", 45 | "htmlClassNames": "u_content_image" 46 | }, 47 | "selectable": true, 48 | "draggable": true, 49 | "duplicatable": true, 50 | "deletable": true, 51 | "hideable": true, 52 | "_override": { 53 | "mobile": { 54 | "src": { 55 | "maxWidth": "20%", 56 | "autoWidth": false 57 | } 58 | } 59 | } 60 | } 61 | }, { 62 | "id": "wQof8hV6QL", 63 | "type": "heading", 64 | "values": { 65 | "containerPadding": "0px", 66 | "anchor": "", 67 | "headingType": "h1", 68 | "fontWeight": 400, 69 | "fontSize": "48px", 70 | "color": "#ffffff", 71 | "textAlign": "center", 72 | "lineHeight": "140%", 73 | "linkStyle": { 74 | "inherit": true, 75 | "linkColor": "#0000ee", 76 | "linkHoverColor": "#0000ee", 77 | "linkUnderline": true, 78 | "linkHoverUnderline": true 79 | }, 80 | "hideDesktop": false, 81 | "displayCondition": null, 82 | "_meta": { 83 | "htmlID": "u_content_heading_1", 84 | "htmlClassNames": "u_content_heading" 85 | }, 86 | "selectable": true, 87 | "draggable": true, 88 | "duplicatable": true, 89 | "deletable": true, 90 | "hideable": true, 91 | "text": "MacBook Pro", 92 | "_override": { 93 | "mobile": { 94 | "fontSize": "45px" 95 | } 96 | } 97 | } 98 | }, { 99 | "id": "tfkkYtjur9", 100 | "type": "heading", 101 | "values": { 102 | "containerPadding": "0px", 103 | "anchor": "", 104 | "headingType": "h2", 105 | "fontSize": "28px", 106 | "color": "#ffffff", 107 | "textAlign": "center", 108 | "lineHeight": "140%", 109 | "linkStyle": { 110 | "inherit": true, 111 | "linkColor": "#0000ee", 112 | "linkHoverColor": "#0000ee", 113 | "linkUnderline": true, 114 | "linkHoverUnderline": true 115 | }, 116 | "hideDesktop": false, 117 | "displayCondition": null, 118 | "_meta": { 119 | "htmlID": "u_content_heading_2", 120 | "htmlClassNames": "u_content_heading" 121 | }, 122 | "selectable": true, 123 | "draggable": true, 124 | "duplicatable": true, 125 | "deletable": true, 126 | "hideable": true, 127 | "text": "Mover. Maker. Boundary breaker.", 128 | "_override": { 129 | "mobile": { 130 | "fontSize": "19px" 131 | } 132 | } 133 | } 134 | }, { 135 | "id": "7wzu4Z8K86", 136 | "type": "text", 137 | "values": { 138 | "containerPadding": "10px", 139 | "anchor": "", 140 | "fontSize": "17px", 141 | "textAlign": "center", 142 | "lineHeight": "140%", 143 | "linkStyle": { 144 | "inherit": true, 145 | "linkColor": "#0000ee", 146 | "linkHoverColor": "#0000ee", 147 | "linkUnderline": true, 148 | "linkHoverUnderline": true 149 | }, 150 | "hideDesktop": false, 151 | "displayCondition": null, 152 | "_meta": { 153 | "htmlID": "u_content_text_2", 154 | "htmlClassNames": "u_content_text" 155 | }, 156 | "selectable": true, 157 | "draggable": true, 158 | "duplicatable": true, 159 | "deletable": true, 160 | "hideable": true, 161 | "text": "

From $1999 or $166.58/mo. for 12 mo.

", 162 | "_override": { 163 | "mobile": { 164 | "fontSize": "14px" 165 | } 166 | } 167 | } 168 | }], 169 | "values": { 170 | "_meta": { 171 | "htmlID": "u_column_1", 172 | "htmlClassNames": "u_column" 173 | }, 174 | "border": {}, 175 | "padding": "0px", 176 | "backgroundColor": "" 177 | } 178 | }], 179 | "values": { 180 | "displayCondition": null, 181 | "columns": false, 182 | "backgroundColor": "", 183 | "columnsBackgroundColor": "", 184 | "backgroundImage": { 185 | "url": "", 186 | "fullWidth": true, 187 | "repeat": "no-repeat", 188 | "size": "custom", 189 | "position": "center" 190 | }, 191 | "padding": "0px", 192 | "anchor": "", 193 | "hideDesktop": false, 194 | "_meta": { 195 | "htmlID": "u_row_1", 196 | "htmlClassNames": "u_row" 197 | }, 198 | "selectable": true, 199 | "draggable": true, 200 | "duplicatable": true, 201 | "deletable": true, 202 | "hideable": true 203 | } 204 | }, { 205 | "id": "A-f41NTazI", 206 | "cells": [1, 1], 207 | "columns": [{ 208 | "id": "SfLBIwDbWU", 209 | "contents": [{ 210 | "id": "vjfsdzgJRX", 211 | "type": "button", 212 | "values": { 213 | "containerPadding": "10px", 214 | "anchor": "", 215 | "href": { 216 | "name": "web", 217 | "values": { 218 | "href": "", 219 | "target": "_blank" 220 | } 221 | }, 222 | "buttonColors": { 223 | "color": "#FFFFFF", 224 | "backgroundColor": "#0071e3", 225 | "hoverColor": "#FFFFFF", 226 | "hoverBackgroundColor": "#3AAEE0" 227 | }, 228 | "size": { 229 | "autoWidth": true, 230 | "width": "100%" 231 | }, 232 | "fontSize": "17px", 233 | "textAlign": "right", 234 | "lineHeight": "120%", 235 | "padding": "10px 20px", 236 | "border": {}, 237 | "borderRadius": "25px", 238 | "hideDesktop": false, 239 | "displayCondition": null, 240 | "_meta": { 241 | "htmlID": "u_content_button_2", 242 | "htmlClassNames": "u_content_button" 243 | }, 244 | "selectable": true, 245 | "draggable": true, 246 | "duplicatable": true, 247 | "deletable": true, 248 | "hideable": true, 249 | "text": "Buy", 250 | "calculatedWidth": 69, 251 | "calculatedHeight": 40, 252 | "_override": { 253 | "mobile": { 254 | "textAlign": "center" 255 | } 256 | } 257 | } 258 | }], 259 | "values": { 260 | "_meta": { 261 | "htmlID": "u_column_2", 262 | "htmlClassNames": "u_column" 263 | }, 264 | "border": {}, 265 | "padding": "0px", 266 | "borderRadius": "0px", 267 | "backgroundColor": "" 268 | } 269 | }, { 270 | "id": "oHGVnfFNrL", 271 | "contents": [{ 272 | "id": "X9LHO8t95H", 273 | "type": "text", 274 | "values": { 275 | "containerPadding": "20px", 276 | "anchor": "", 277 | "fontSize": "17px", 278 | "color": "#0071e3", 279 | "textAlign": "left", 280 | "lineHeight": "140%", 281 | "linkStyle": { 282 | "inherit": true, 283 | "linkColor": "#0000ee", 284 | "linkHoverColor": "#0000ee", 285 | "linkUnderline": true, 286 | "linkHoverUnderline": true 287 | }, 288 | "hideDesktop": false, 289 | "displayCondition": null, 290 | "_meta": { 291 | "htmlID": "u_content_text_3", 292 | "htmlClassNames": "u_content_text" 293 | }, 294 | "selectable": true, 295 | "draggable": true, 296 | "duplicatable": true, 297 | "deletable": true, 298 | "hideable": true, 299 | "text": "

Learn more 

", 300 | "_override": { 301 | "mobile": { 302 | "textAlign": "center" 303 | } 304 | } 305 | } 306 | }], 307 | "values": { 308 | "_meta": { 309 | "htmlID": "u_column_3", 310 | "htmlClassNames": "u_column" 311 | }, 312 | "border": {}, 313 | "padding": "0px", 314 | "borderRadius": "0px", 315 | "backgroundColor": "" 316 | } 317 | }], 318 | "values": { 319 | "displayCondition": null, 320 | "columns": false, 321 | "backgroundColor": "", 322 | "columnsBackgroundColor": "", 323 | "backgroundImage": { 324 | "url": "", 325 | "fullWidth": true, 326 | "repeat": "no-repeat", 327 | "size": "custom", 328 | "position": "center" 329 | }, 330 | "padding": "0px", 331 | "anchor": "", 332 | "hideDesktop": false, 333 | "_meta": { 334 | "htmlID": "u_row_2", 335 | "htmlClassNames": "u_row" 336 | }, 337 | "selectable": true, 338 | "draggable": true, 339 | "duplicatable": true, 340 | "deletable": true, 341 | "hideable": true 342 | } 343 | }, { 344 | "id": "Rd4HAvqb8t", 345 | "cells": [1], 346 | "columns": [{ 347 | "id": "_t6kskqCwL", 348 | "contents": [{ 349 | "id": "AF8ZpW__0i", 350 | "type": "image", 351 | "values": { 352 | "containerPadding": "0px", 353 | "anchor": "", 354 | "src": { 355 | "url": "https://assets.unlayer.com/projects/139/1676495949571-hero_2x.jpg", 356 | "width": 1424, 357 | "height": 880 358 | }, 359 | "textAlign": "center", 360 | "altText": "", 361 | "action": { 362 | "name": "web", 363 | "values": { 364 | "href": "", 365 | "target": "_blank" 366 | } 367 | }, 368 | "hideDesktop": false, 369 | "displayCondition": null, 370 | "_meta": { 371 | "htmlID": "u_content_image_2", 372 | "htmlClassNames": "u_content_image" 373 | }, 374 | "selectable": true, 375 | "draggable": true, 376 | "duplicatable": true, 377 | "deletable": true, 378 | "hideable": true 379 | } 380 | }, { 381 | "id": "iEmfF6xJBD", 382 | "type": "text", 383 | "values": { 384 | "containerPadding": "10px", 385 | "anchor": "", 386 | "fontWeight": 700, 387 | "fontSize": "21px", 388 | "color": "#9d9d9d", 389 | "textAlign": "center", 390 | "lineHeight": "140%", 391 | "linkStyle": { 392 | "inherit": true, 393 | "linkColor": "#0000ee", 394 | "linkHoverColor": "#0000ee", 395 | "linkUnderline": true, 396 | "linkHoverUnderline": true 397 | }, 398 | "hideDesktop": false, 399 | "displayCondition": null, 400 | "_meta": { 401 | "htmlID": "u_content_text_4", 402 | "htmlClassNames": "u_content_text" 403 | }, 404 | "selectable": true, 405 | "draggable": true, 406 | "duplicatable": true, 407 | "deletable": true, 408 | "hideable": true, 409 | "text": "

Supercharged by M2 Pro and M2 Max.

", 410 | "_override": { 411 | "mobile": { 412 | "lineHeight": "140%", 413 | "fontSize": "18px" 414 | } 415 | } 416 | } 417 | }, { 418 | "id": "usZCBV0vIV", 419 | "type": "text", 420 | "values": { 421 | "containerPadding": "10px", 422 | "anchor": "", 423 | "fontWeight": 700, 424 | "fontSize": "21px", 425 | "color": "#9d9d9d", 426 | "textAlign": "center", 427 | "lineHeight": "140%", 428 | "linkStyle": { 429 | "inherit": true, 430 | "linkColor": "#0000ee", 431 | "linkHoverColor": "#0000ee", 432 | "linkUnderline": true, 433 | "linkHoverUnderline": true 434 | }, 435 | "hideDesktop": false, 436 | "displayCondition": null, 437 | "_meta": { 438 | "htmlID": "u_content_text_7", 439 | "htmlClassNames": "u_content_text" 440 | }, 441 | "selectable": true, 442 | "draggable": true, 443 | "duplicatable": true, 444 | "deletable": true, 445 | "hideable": true, 446 | "text": "

Up to 22 hours of battery life.

", 447 | "_override": { 448 | "mobile": { 449 | "fontSize": "18px" 450 | } 451 | } 452 | } 453 | }, { 454 | "id": "GvsqJNYPRO", 455 | "type": "text", 456 | "values": { 457 | "containerPadding": "10px", 458 | "anchor": "", 459 | "fontWeight": 700, 460 | "fontSize": "21px", 461 | "color": "#9d9d9d", 462 | "textAlign": "center", 463 | "lineHeight": "140%", 464 | "linkStyle": { 465 | "inherit": true, 466 | "linkColor": "#0000ee", 467 | "linkHoverColor": "#0000ee", 468 | "linkUnderline": true, 469 | "linkHoverUnderline": true 470 | }, 471 | "hideDesktop": false, 472 | "displayCondition": null, 473 | "_meta": { 474 | "htmlID": "u_content_text_6", 475 | "htmlClassNames": "u_content_text" 476 | }, 477 | "selectable": true, 478 | "draggable": true, 479 | "duplicatable": true, 480 | "deletable": true, 481 | "hideable": true, 482 | "text": "

Stunning Liquid Retina XDR display.

", 483 | "_override": { 484 | "mobile": { 485 | "fontSize": "18px" 486 | } 487 | } 488 | } 489 | }, { 490 | "id": "T_w1lypU3k", 491 | "type": "text", 492 | "values": { 493 | "containerPadding": "10px", 494 | "anchor": "", 495 | "fontWeight": 700, 496 | "fontSize": "21px", 497 | "color": "#9d9d9d", 498 | "textAlign": "center", 499 | "lineHeight": "140%", 500 | "linkStyle": { 501 | "inherit": true, 502 | "linkColor": "#0000ee", 503 | "linkHoverColor": "#0000ee", 504 | "linkUnderline": true, 505 | "linkHoverUnderline": true 506 | }, 507 | "hideDesktop": false, 508 | "displayCondition": null, 509 | "_meta": { 510 | "htmlID": "u_content_text_5", 511 | "htmlClassNames": "u_content_text" 512 | }, 513 | "selectable": true, 514 | "draggable": true, 515 | "duplicatable": true, 516 | "deletable": true, 517 | "hideable": true, 518 | "text": "

All the ports you need and faster Wi-Fi 6E.3

", 519 | "_override": { 520 | "mobile": { 521 | "fontSize": "18px" 522 | } 523 | } 524 | } 525 | }], 526 | "values": { 527 | "_meta": { 528 | "htmlID": "u_column_4", 529 | "htmlClassNames": "u_column" 530 | }, 531 | "border": {}, 532 | "padding": "0px", 533 | "borderRadius": "0px", 534 | "backgroundColor": "" 535 | } 536 | }], 537 | "values": { 538 | "displayCondition": null, 539 | "columns": false, 540 | "backgroundColor": "", 541 | "columnsBackgroundColor": "", 542 | "backgroundImage": { 543 | "url": "", 544 | "fullWidth": true, 545 | "repeat": "no-repeat", 546 | "size": "custom", 547 | "position": "center" 548 | }, 549 | "padding": "15px 15px 70px", 550 | "anchor": "", 551 | "hideDesktop": false, 552 | "_meta": { 553 | "htmlID": "u_row_3", 554 | "htmlClassNames": "u_row" 555 | }, 556 | "selectable": true, 557 | "draggable": true, 558 | "duplicatable": true, 559 | "deletable": true, 560 | "hideable": true 561 | } 562 | }, { 563 | "id": "Wlvn-fimOW", 564 | "cells": [1], 565 | "columns": [{ 566 | "id": "EmTZshrUgj", 567 | "contents": [{ 568 | "id": "KXAX-ozp-i", 569 | "type": "heading", 570 | "values": { 571 | "containerPadding": "10px", 572 | "anchor": "", 573 | "headingType": "h1", 574 | "fontSize": "32px", 575 | "color": "#ffffff", 576 | "textAlign": "center", 577 | "lineHeight": "120%", 578 | "linkStyle": { 579 | "inherit": true, 580 | "linkColor": "#0000ee", 581 | "linkHoverColor": "#0000ee", 582 | "linkUnderline": true, 583 | "linkHoverUnderline": true 584 | }, 585 | "hideDesktop": false, 586 | "displayCondition": null, 587 | "_meta": { 588 | "htmlID": "u_content_heading_3", 589 | "htmlClassNames": "u_content_heading" 590 | }, 591 | "selectable": true, 592 | "draggable": true, 593 | "duplicatable": true, 594 | "deletable": true, 595 | "hideable": true, 596 | "text": "Why Apple is the best place
to buy your new Mac.", 597 | "_override": { 598 | "mobile": { 599 | "fontSize": "28px" 600 | } 601 | } 602 | } 603 | }], 604 | "values": { 605 | "_meta": { 606 | "htmlID": "u_column_5", 607 | "htmlClassNames": "u_column" 608 | }, 609 | "border": {}, 610 | "padding": "0px", 611 | "borderRadius": "0px", 612 | "backgroundColor": "" 613 | } 614 | }], 615 | "values": { 616 | "displayCondition": null, 617 | "columns": false, 618 | "backgroundColor": "#1d1d1f", 619 | "columnsBackgroundColor": "", 620 | "backgroundImage": { 621 | "url": "", 622 | "fullWidth": true, 623 | "repeat": "no-repeat", 624 | "size": "custom", 625 | "position": "center" 626 | }, 627 | "padding": "50px", 628 | "anchor": "", 629 | "hideDesktop": false, 630 | "_meta": { 631 | "htmlID": "u_row_4", 632 | "htmlClassNames": "u_row" 633 | }, 634 | "selectable": true, 635 | "draggable": true, 636 | "duplicatable": true, 637 | "deletable": true, 638 | "hideable": true 639 | } 640 | }, { 641 | "id": "qRAvYBUrR3", 642 | "cells": [1, 1], 643 | "columns": [{ 644 | "id": "MfyrG9rNcx", 645 | "contents": [{ 646 | "id": "qnuJUd79Ge", 647 | "type": "text", 648 | "values": { 649 | "containerPadding": "10px", 650 | "anchor": "", 651 | "fontSize": "24px", 652 | "textAlign": "center", 653 | "lineHeight": "120%", 654 | "linkStyle": { 655 | "inherit": true, 656 | "linkColor": "#0000ee", 657 | "linkHoverColor": "#0000ee", 658 | "linkUnderline": true, 659 | "linkHoverUnderline": true 660 | }, 661 | "hideDesktop": false, 662 | "displayCondition": null, 663 | "_meta": { 664 | "htmlID": "u_content_text_8", 665 | "htmlClassNames": "u_content_text" 666 | }, 667 | "selectable": true, 668 | "draggable": true, 669 | "duplicatable": true, 670 | "deletable": true, 671 | "hideable": true, 672 | "text": "

Get credit toward

\n

a new Mac.

" 673 | } 674 | }, { 675 | "id": "RDIKTy_DOp", 676 | "type": "text", 677 | "values": { 678 | "containerPadding": "10px", 679 | "anchor": "", 680 | "textAlign": "center", 681 | "lineHeight": "150%", 682 | "linkStyle": { 683 | "inherit": true, 684 | "linkColor": "#0000ee", 685 | "linkHoverColor": "#0000ee", 686 | "linkUnderline": true, 687 | "linkHoverUnderline": true 688 | }, 689 | "hideDesktop": false, 690 | "displayCondition": null, 691 | "_meta": { 692 | "htmlID": "u_content_text_9", 693 | "htmlClassNames": "u_content_text" 694 | }, 695 | "selectable": true, 696 | "draggable": true, 697 | "duplicatable": true, 698 | "deletable": true, 699 | "hideable": true, 700 | "text": "

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.

" 701 | } 702 | }, { 703 | "id": "tnH6A8J6sD", 704 | "type": "text", 705 | "values": { 706 | "containerPadding": "10px", 707 | "anchor": "", 708 | "fontSize": "14px", 709 | "color": "#0071e3", 710 | "textAlign": "center", 711 | "lineHeight": "140%", 712 | "linkStyle": { 713 | "inherit": true, 714 | "linkColor": "#0000ee", 715 | "linkHoverColor": "#0000ee", 716 | "linkUnderline": true, 717 | "linkHoverUnderline": true 718 | }, 719 | "hideDesktop": false, 720 | "displayCondition": null, 721 | "_meta": { 722 | "htmlID": "u_content_text_10", 723 | "htmlClassNames": "u_content_text" 724 | }, 725 | "selectable": true, 726 | "draggable": true, 727 | "duplicatable": true, 728 | "deletable": true, 729 | "hideable": true, 730 | "text": "

Find your trade-in value

" 731 | } 732 | }], 733 | "values": { 734 | "_meta": { 735 | "htmlID": "u_column_6", 736 | "htmlClassNames": "u_column" 737 | }, 738 | "border": {}, 739 | "padding": "33px", 740 | "borderRadius": "0px", 741 | "backgroundColor": "" 742 | } 743 | }, { 744 | "id": "jGDnuQs-ho", 745 | "contents": [{ 746 | "id": "Wbvl_87V-4", 747 | "type": "image", 748 | "values": { 749 | "containerPadding": "0px", 750 | "anchor": "", 751 | "src": { 752 | "url": "https://assets.unlayer.com/projects/139/1676496418898-credit_mac_2x.jpg", 753 | "width": 712, 754 | "height": 550 755 | }, 756 | "textAlign": "center", 757 | "altText": "", 758 | "action": { 759 | "name": "web", 760 | "values": { 761 | "href": "", 762 | "target": "_blank" 763 | } 764 | }, 765 | "hideDesktop": false, 766 | "displayCondition": null, 767 | "_meta": { 768 | "htmlID": "u_content_image_3", 769 | "htmlClassNames": "u_content_image" 770 | }, 771 | "selectable": true, 772 | "draggable": true, 773 | "duplicatable": true, 774 | "deletable": true, 775 | "hideable": true 776 | } 777 | }], 778 | "values": { 779 | "_meta": { 780 | "htmlID": "u_column_7", 781 | "htmlClassNames": "u_column" 782 | }, 783 | "border": {}, 784 | "padding": "0px", 785 | "borderRadius": "0px", 786 | "backgroundColor": "" 787 | } 788 | }], 789 | "values": { 790 | "displayCondition": null, 791 | "columns": false, 792 | "backgroundColor": "#1d1d1f", 793 | "columnsBackgroundColor": "#000000", 794 | "backgroundImage": { 795 | "url": "", 796 | "fullWidth": true, 797 | "repeat": "no-repeat", 798 | "size": "custom", 799 | "position": "center" 800 | }, 801 | "padding": "5px", 802 | "anchor": "", 803 | "hideDesktop": false, 804 | "_meta": { 805 | "htmlID": "u_row_5", 806 | "htmlClassNames": "u_row" 807 | }, 808 | "selectable": true, 809 | "draggable": true, 810 | "duplicatable": true, 811 | "deletable": true, 812 | "hideable": true 813 | } 814 | }, { 815 | "id": "xsDeI6ThVX", 816 | "cells": [1, 1], 817 | "columns": [{ 818 | "id": "PtkZbFNtjL", 819 | "contents": [{ 820 | "id": "JZtislN2W7", 821 | "type": "text", 822 | "values": { 823 | "containerPadding": "10px", 824 | "anchor": "", 825 | "fontSize": "24px", 826 | "textAlign": "center", 827 | "lineHeight": "120%", 828 | "linkStyle": { 829 | "inherit": true, 830 | "linkColor": "#0000ee", 831 | "linkHoverColor": "#0000ee", 832 | "linkUnderline": true, 833 | "linkHoverUnderline": true 834 | }, 835 | "hideDesktop": false, 836 | "displayCondition": null, 837 | "_meta": { 838 | "htmlID": "u_content_text_11", 839 | "htmlClassNames": "u_content_text" 840 | }, 841 | "selectable": true, 842 | "draggable": true, 843 | "duplicatable": true, 844 | "deletable": true, 845 | "hideable": true, 846 | "text": "

Apple Card Monthly Installments.

" 847 | } 848 | }, { 849 | "id": "9rqc5f7Vsk", 850 | "type": "text", 851 | "values": { 852 | "containerPadding": "10px", 853 | "anchor": "", 854 | "textAlign": "center", 855 | "lineHeight": "150%", 856 | "linkStyle": { 857 | "inherit": true, 858 | "linkColor": "#0000ee", 859 | "linkHoverColor": "#0000ee", 860 | "linkUnderline": true, 861 | "linkHoverUnderline": true 862 | }, 863 | "hideDesktop": false, 864 | "displayCondition": null, 865 | "_meta": { 866 | "htmlID": "u_content_text_24", 867 | "htmlClassNames": "u_content_text" 868 | }, 869 | "selectable": true, 870 | "draggable": true, 871 | "duplicatable": true, 872 | "deletable": true, 873 | "hideable": true, 874 | "text": "

Pay over time, interest-free when you choose to check out with Apple Card Monthly Installments.

" 875 | } 876 | }, { 877 | "id": "le8EzyAcDY", 878 | "type": "text", 879 | "values": { 880 | "containerPadding": "10px", 881 | "anchor": "", 882 | "fontSize": "14px", 883 | "color": "#0071e3", 884 | "textAlign": "center", 885 | "lineHeight": "140%", 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_13", 897 | "htmlClassNames": "u_content_text" 898 | }, 899 | "selectable": true, 900 | "draggable": true, 901 | "duplicatable": true, 902 | "deletable": true, 903 | "hideable": true, 904 | "text": "

Learn more

" 905 | } 906 | }, { 907 | "id": "EZmcoOSqCd", 908 | "type": "image", 909 | "values": { 910 | "containerPadding": "0px", 911 | "anchor": "", 912 | "src": { 913 | "url": "https://assets.unlayer.com/projects/139/1676497065877-apple_card_2x.jpg", 914 | "width": 700, 915 | "height": 390 916 | }, 917 | "textAlign": "center", 918 | "altText": "", 919 | "action": { 920 | "name": "web", 921 | "values": { 922 | "href": "", 923 | "target": "_blank" 924 | } 925 | }, 926 | "hideDesktop": false, 927 | "displayCondition": null, 928 | "_meta": { 929 | "htmlID": "u_content_image_7", 930 | "htmlClassNames": "u_content_image" 931 | }, 932 | "selectable": true, 933 | "draggable": true, 934 | "duplicatable": true, 935 | "deletable": true, 936 | "hideable": true 937 | } 938 | }], 939 | "values": { 940 | "_meta": { 941 | "htmlID": "u_column_8", 942 | "htmlClassNames": "u_column" 943 | }, 944 | "border": { 945 | "borderTopColor": "#CCC", 946 | "borderTopStyle": "solid", 947 | "borderTopWidth": "0px", 948 | "borderLeftColor": "#CCC", 949 | "borderLeftStyle": "solid", 950 | "borderLeftWidth": "0px", 951 | "borderRightColor": "#1d1d1f", 952 | "borderRightStyle": "solid", 953 | "borderRightWidth": "5px", 954 | "borderBottomColor": "#CCC", 955 | "borderBottomStyle": "solid", 956 | "borderBottomWidth": "0px" 957 | }, 958 | "padding": "33px 0px 0px", 959 | "_override": { 960 | "mobile": { 961 | "border": { 962 | "borderTopColor": "#CCC", 963 | "borderTopStyle": "solid", 964 | "borderTopWidth": "0px", 965 | "borderLeftColor": "#CCC", 966 | "borderLeftStyle": "solid", 967 | "borderLeftWidth": "0px", 968 | "borderRightColor": "#CCC", 969 | "borderRightStyle": "solid", 970 | "borderRightWidth": "0px", 971 | "borderBottomColor": "#CCC", 972 | "borderBottomStyle": "solid", 973 | "borderBottomWidth": "0px" 974 | } 975 | } 976 | }, 977 | "borderRadius": "0px", 978 | "backgroundColor": "" 979 | } 980 | }, { 981 | "id": "jAFMuhCh-p", 982 | "contents": [{ 983 | "id": "tXUPtUC2gk", 984 | "type": "text", 985 | "values": { 986 | "containerPadding": "10px", 987 | "anchor": "", 988 | "fontSize": "24px", 989 | "textAlign": "center", 990 | "lineHeight": "120%", 991 | "linkStyle": { 992 | "inherit": true, 993 | "linkColor": "#0000ee", 994 | "linkHoverColor": "#0000ee", 995 | "linkUnderline": true, 996 | "linkHoverUnderline": true 997 | }, 998 | "hideDesktop": false, 999 | "displayCondition": null, 1000 | "_meta": { 1001 | "htmlID": "u_content_text_21", 1002 | "htmlClassNames": "u_content_text" 1003 | }, 1004 | "selectable": true, 1005 | "draggable": true, 1006 | "duplicatable": true, 1007 | "deletable": true, 1008 | "hideable": true, 1009 | "text": "

Save on a new

\n

Mac with Apple

\n

education pricing.

" 1010 | } 1011 | }, { 1012 | "id": "fUoTe1sYhQ", 1013 | "type": "text", 1014 | "values": { 1015 | "containerPadding": "10px", 1016 | "anchor": "", 1017 | "fontSize": "14px", 1018 | "color": "#0071e3", 1019 | "textAlign": "center", 1020 | "lineHeight": "140%", 1021 | "linkStyle": { 1022 | "inherit": true, 1023 | "linkColor": "#0000ee", 1024 | "linkHoverColor": "#0000ee", 1025 | "linkUnderline": true, 1026 | "linkHoverUnderline": true 1027 | }, 1028 | "hideDesktop": false, 1029 | "displayCondition": null, 1030 | "_meta": { 1031 | "htmlID": "u_content_text_23", 1032 | "htmlClassNames": "u_content_text" 1033 | }, 1034 | "selectable": true, 1035 | "draggable": true, 1036 | "duplicatable": true, 1037 | "deletable": true, 1038 | "hideable": true, 1039 | "text": "

Shop

" 1040 | } 1041 | }, { 1042 | "id": "ij9PdsfvZQ", 1043 | "type": "image", 1044 | "values": { 1045 | "containerPadding": "21px 0px 0px", 1046 | "anchor": "", 1047 | "src": { 1048 | "url": "https://assets.unlayer.com/projects/139/1676497143860-edu_mac_2x.jpg", 1049 | "width": 700, 1050 | "height": 390 1051 | }, 1052 | "textAlign": "center", 1053 | "altText": "", 1054 | "action": { 1055 | "name": "web", 1056 | "values": { 1057 | "href": "", 1058 | "target": "_blank" 1059 | } 1060 | }, 1061 | "hideDesktop": false, 1062 | "displayCondition": null, 1063 | "_meta": { 1064 | "htmlID": "u_content_image_8", 1065 | "htmlClassNames": "u_content_image" 1066 | }, 1067 | "selectable": true, 1068 | "draggable": true, 1069 | "duplicatable": true, 1070 | "deletable": true, 1071 | "hideable": true 1072 | } 1073 | }], 1074 | "values": { 1075 | "_meta": { 1076 | "htmlID": "u_column_9", 1077 | "htmlClassNames": "u_column" 1078 | }, 1079 | "border": { 1080 | "borderTopColor": "#CCC", 1081 | "borderTopStyle": "solid", 1082 | "borderTopWidth": "0px", 1083 | "borderLeftColor": "#1d1d1f", 1084 | "borderLeftStyle": "solid", 1085 | "borderLeftWidth": "5px", 1086 | "borderRightColor": "#CCC", 1087 | "borderRightStyle": "solid", 1088 | "borderRightWidth": "0px", 1089 | "borderBottomColor": "#CCC", 1090 | "borderBottomStyle": "solid", 1091 | "borderBottomWidth": "0px" 1092 | }, 1093 | "padding": "33px 0px 0px", 1094 | "_override": { 1095 | "mobile": { 1096 | "border": { 1097 | "borderTopColor": "#CCC", 1098 | "borderTopStyle": "solid", 1099 | "borderTopWidth": "0px", 1100 | "borderLeftColor": "#CCC", 1101 | "borderLeftStyle": "solid", 1102 | "borderLeftWidth": "0px", 1103 | "borderRightColor": "#CCC", 1104 | "borderRightStyle": "solid", 1105 | "borderRightWidth": "0px", 1106 | "borderBottomColor": "#CCC", 1107 | "borderBottomStyle": "solid", 1108 | "borderBottomWidth": "0px" 1109 | } 1110 | } 1111 | }, 1112 | "borderRadius": "0px", 1113 | "backgroundColor": "" 1114 | } 1115 | }], 1116 | "values": { 1117 | "displayCondition": null, 1118 | "columns": false, 1119 | "backgroundColor": "#1d1d1f", 1120 | "columnsBackgroundColor": "#000000", 1121 | "backgroundImage": { 1122 | "url": "", 1123 | "fullWidth": true, 1124 | "repeat": "no-repeat", 1125 | "size": "custom", 1126 | "position": "center" 1127 | }, 1128 | "padding": "5px", 1129 | "anchor": "", 1130 | "hideDesktop": false, 1131 | "_meta": { 1132 | "htmlID": "u_row_6", 1133 | "htmlClassNames": "u_row" 1134 | }, 1135 | "selectable": true, 1136 | "draggable": true, 1137 | "duplicatable": true, 1138 | "deletable": true, 1139 | "hideable": true 1140 | } 1141 | }, { 1142 | "id": "GyxkKaDoVf", 1143 | "cells": [1, 1], 1144 | "columns": [{ 1145 | "id": "_QiC12awFa", 1146 | "contents": [{ 1147 | "id": "S_hqZ7HMSl", 1148 | "type": "image", 1149 | "values": { 1150 | "containerPadding": "0px", 1151 | "anchor": "", 1152 | "src": { 1153 | "url": "https://assets.unlayer.com/projects/139/1676496501021-specialist_2x.jpg", 1154 | "width": 712, 1155 | "height": 550 1156 | }, 1157 | "textAlign": "center", 1158 | "altText": "", 1159 | "action": { 1160 | "name": "web", 1161 | "values": { 1162 | "href": "", 1163 | "target": "_blank" 1164 | } 1165 | }, 1166 | "hideDesktop": false, 1167 | "displayCondition": null, 1168 | "_meta": { 1169 | "htmlID": "u_content_image_6", 1170 | "htmlClassNames": "u_content_image" 1171 | }, 1172 | "selectable": true, 1173 | "draggable": true, 1174 | "duplicatable": true, 1175 | "deletable": true, 1176 | "hideable": true 1177 | } 1178 | }], 1179 | "values": { 1180 | "_meta": { 1181 | "htmlID": "u_column_12", 1182 | "htmlClassNames": "u_column" 1183 | }, 1184 | "border": {}, 1185 | "padding": "0px", 1186 | "borderRadius": "0px", 1187 | "backgroundColor": "" 1188 | } 1189 | }, { 1190 | "id": "tBvHHdYsbP", 1191 | "contents": [{ 1192 | "id": "YBq_C6WCxM", 1193 | "type": "text", 1194 | "values": { 1195 | "containerPadding": "10px", 1196 | "anchor": "", 1197 | "fontSize": "24px", 1198 | "textAlign": "center", 1199 | "lineHeight": "120%", 1200 | "linkStyle": { 1201 | "inherit": true, 1202 | "linkColor": "#0000ee", 1203 | "linkHoverColor": "#0000ee", 1204 | "linkUnderline": true, 1205 | "linkHoverUnderline": true 1206 | }, 1207 | "hideDesktop": false, 1208 | "displayCondition": null, 1209 | "_meta": { 1210 | "htmlID": "u_content_text_18", 1211 | "htmlClassNames": "u_content_text" 1212 | }, 1213 | "selectable": true, 1214 | "draggable": true, 1215 | "duplicatable": true, 1216 | "deletable": true, 1217 | "hideable": true, 1218 | "text": "

Shop one on one with

\n

a Mac Specialist.

" 1219 | } 1220 | }, { 1221 | "id": "0DF1Wlu-f8", 1222 | "type": "text", 1223 | "values": { 1224 | "containerPadding": "10px", 1225 | "anchor": "", 1226 | "textAlign": "center", 1227 | "lineHeight": "150%", 1228 | "linkStyle": { 1229 | "inherit": true, 1230 | "linkColor": "#0000ee", 1231 | "linkHoverColor": "#0000ee", 1232 | "linkUnderline": true, 1233 | "linkHoverUnderline": true 1234 | }, 1235 | "hideDesktop": false, 1236 | "displayCondition": null, 1237 | "_meta": { 1238 | "htmlID": "u_content_text_19", 1239 | "htmlClassNames": "u_content_text" 1240 | }, 1241 | "selectable": true, 1242 | "draggable": true, 1243 | "duplicatable": true, 1244 | "deletable": true, 1245 | "hideable": true, 1246 | "text": "

Our Specialists can help you choose, configure, and buy the perfect Mac.

" 1247 | } 1248 | }, { 1249 | "id": "3PX82nq2MS", 1250 | "type": "text", 1251 | "values": { 1252 | "containerPadding": "10px", 1253 | "anchor": "", 1254 | "fontSize": "14px", 1255 | "color": "#0071e3", 1256 | "textAlign": "center", 1257 | "lineHeight": "140%", 1258 | "linkStyle": { 1259 | "inherit": true, 1260 | "linkColor": "#0000ee", 1261 | "linkHoverColor": "#0000ee", 1262 | "linkUnderline": true, 1263 | "linkHoverUnderline": true 1264 | }, 1265 | "hideDesktop": false, 1266 | "displayCondition": null, 1267 | "_meta": { 1268 | "htmlID": "u_content_text_20", 1269 | "htmlClassNames": "u_content_text" 1270 | }, 1271 | "selectable": true, 1272 | "draggable": true, 1273 | "duplicatable": true, 1274 | "deletable": true, 1275 | "hideable": true, 1276 | "text": "

Find a store

" 1277 | } 1278 | }], 1279 | "values": { 1280 | "_meta": { 1281 | "htmlID": "u_column_13", 1282 | "htmlClassNames": "u_column" 1283 | }, 1284 | "border": {}, 1285 | "padding": "33px", 1286 | "borderRadius": "0px", 1287 | "backgroundColor": "" 1288 | } 1289 | }], 1290 | "values": { 1291 | "displayCondition": null, 1292 | "columns": false, 1293 | "backgroundColor": "#1d1d1f", 1294 | "columnsBackgroundColor": "#000000", 1295 | "backgroundImage": { 1296 | "url": "", 1297 | "fullWidth": true, 1298 | "repeat": "no-repeat", 1299 | "size": "custom", 1300 | "position": "center" 1301 | }, 1302 | "padding": "5px", 1303 | "anchor": "", 1304 | "hideDesktop": false, 1305 | "_meta": { 1306 | "htmlID": "u_row_8", 1307 | "htmlClassNames": "u_row" 1308 | }, 1309 | "selectable": true, 1310 | "draggable": true, 1311 | "duplicatable": true, 1312 | "deletable": true, 1313 | "hideable": true 1314 | } 1315 | }, { 1316 | "id": "he9WBb_LIA", 1317 | "cells": [1], 1318 | "columns": [{ 1319 | "id": "9KxIY1TsoO", 1320 | "contents": [{ 1321 | "id": "TJ6qaeBuzl", 1322 | "type": "menu", 1323 | "values": { 1324 | "containerPadding": "5px", 1325 | "anchor": "", 1326 | "menu": { 1327 | "items": [{ 1328 | "key": "1676496571373", 1329 | "link": { 1330 | "name": "web", 1331 | "attrs": { 1332 | "href": "{{href}}", 1333 | "target": "{{target}}" 1334 | }, 1335 | "values": { 1336 | "href": "https://www.apple.com/", 1337 | "target": "_self" 1338 | } 1339 | }, 1340 | "text": "Shop Online" 1341 | }, { 1342 | "key": "1676496577930", 1343 | "link": { 1344 | "name": "web", 1345 | "attrs": { 1346 | "href": "{{href}}", 1347 | "target": "{{target}}" 1348 | }, 1349 | "values": { 1350 | "href": "https://www.apple.com/", 1351 | "target": "_self" 1352 | } 1353 | }, 1354 | "text": "Find a Store" 1355 | }, { 1356 | "key": "1676496581406", 1357 | "link": { 1358 | "name": "web", 1359 | "attrs": { 1360 | "href": "{{href}}", 1361 | "target": "{{target}}" 1362 | }, 1363 | "values": { 1364 | "href": "https://www.apple.com/", 1365 | "target": "_self" 1366 | } 1367 | }, 1368 | "text": "1-800-MY-APPLE" 1369 | }, { 1370 | "key": "1676496588057", 1371 | "link": { 1372 | "name": "web", 1373 | "attrs": { 1374 | "href": "{{href}}", 1375 | "target": "{{target}}" 1376 | }, 1377 | "values": { 1378 | "href": "https://www.apple.com/", 1379 | "target": "_self" 1380 | } 1381 | }, 1382 | "text": "Get the Apple Store App" 1383 | }] 1384 | }, 1385 | "fontSize": "14px", 1386 | "textColor": "#424245", 1387 | "linkColor": "#d2d2d7", 1388 | "align": "center", 1389 | "layout": "horizontal", 1390 | "separator": "|", 1391 | "padding": "5px 10px", 1392 | "hideDesktop": false, 1393 | "displayCondition": null, 1394 | "_meta": { 1395 | "htmlID": "u_content_menu_1", 1396 | "htmlClassNames": "u_content_menu" 1397 | }, 1398 | "selectable": true, 1399 | "draggable": true, 1400 | "duplicatable": true, 1401 | "deletable": true, 1402 | "hideable": true, 1403 | "_override": { 1404 | "mobile": { 1405 | "layout": "vertical" 1406 | } 1407 | } 1408 | } 1409 | }, { 1410 | "id": "mNBB5zCn71", 1411 | "type": "divider", 1412 | "values": { 1413 | "width": "100%", 1414 | "border": { 1415 | "borderTopWidth": "1px", 1416 | "borderTopStyle": "solid", 1417 | "borderTopColor": "#424245" 1418 | }, 1419 | "textAlign": "center", 1420 | "containerPadding": "10px", 1421 | "anchor": "", 1422 | "hideDesktop": false, 1423 | "displayCondition": null, 1424 | "_meta": { 1425 | "htmlID": "u_content_divider_1", 1426 | "htmlClassNames": "u_content_divider" 1427 | }, 1428 | "selectable": true, 1429 | "draggable": true, 1430 | "duplicatable": true, 1431 | "deletable": true, 1432 | "hideable": true 1433 | } 1434 | }, { 1435 | "id": "bo4vg76emo", 1436 | "type": "text", 1437 | "values": { 1438 | "containerPadding": "10px", 1439 | "anchor": "", 1440 | "fontSize": "12px", 1441 | "color": "#86868b", 1442 | "textAlign": "left", 1443 | "lineHeight": "200%", 1444 | "linkStyle": { 1445 | "inherit": false, 1446 | "linkColor": "#d2d2d7", 1447 | "linkHoverColor": "#0000ee", 1448 | "linkUnderline": false, 1449 | "linkHoverUnderline": true, 1450 | "body": false 1451 | }, 1452 | "hideDesktop": false, 1453 | "displayCondition": null, 1454 | "_meta": { 1455 | "htmlID": "u_content_text_17", 1456 | "htmlClassNames": "u_content_text" 1457 | }, 1458 | "selectable": true, 1459 | "draggable": true, 1460 | "duplicatable": true, 1461 | "deletable": true, 1462 | "hideable": true, 1463 | "text": "

If you reside in the U.S. territories, please call Goldman Sachs at 877-255-5923 with questions about Apple Card.

\n

TM and © 2023 Apple Inc. One Apple Park Way, MS 96-DM, Cupertino, CA 95014.

\n

All Rights Reserved    |   Privacy Policy    |   My Apple ID

\n

If you prefer not to receive commercial email from Apple, or if you’ve changed your email address, please click here.

" 1464 | } 1465 | }], 1466 | "values": { 1467 | "_meta": { 1468 | "htmlID": "u_column_10", 1469 | "htmlClassNames": "u_column" 1470 | }, 1471 | "border": {}, 1472 | "padding": "0px 30px", 1473 | "borderRadius": "0px", 1474 | "backgroundColor": "" 1475 | } 1476 | }], 1477 | "values": { 1478 | "displayCondition": null, 1479 | "columns": false, 1480 | "backgroundColor": "#1d1d1f", 1481 | "columnsBackgroundColor": "", 1482 | "backgroundImage": { 1483 | "url": "", 1484 | "fullWidth": true, 1485 | "repeat": "no-repeat", 1486 | "size": "custom", 1487 | "position": "center" 1488 | }, 1489 | "padding": "10px 10px 50px", 1490 | "anchor": "", 1491 | "hideDesktop": false, 1492 | "_meta": { 1493 | "htmlID": "u_row_7", 1494 | "htmlClassNames": "u_row" 1495 | }, 1496 | "selectable": true, 1497 | "draggable": true, 1498 | "duplicatable": true, 1499 | "deletable": true, 1500 | "hideable": true 1501 | } 1502 | }], 1503 | "values": { 1504 | "popupPosition": "center", 1505 | "popupWidth": "600px", 1506 | "popupHeight": "auto", 1507 | "borderRadius": "10px", 1508 | "contentAlign": "center", 1509 | "contentVerticalAlign": "center", 1510 | "contentWidth": 700, 1511 | "fontFamily": { 1512 | "label": "Helvetica", 1513 | "value": "helvetica,sans-serif", 1514 | "url": "", 1515 | "weights": null, 1516 | "defaultFont": true 1517 | }, 1518 | "textColor": "#ffffff", 1519 | "popupBackgroundColor": "#FFFFFF", 1520 | "popupBackgroundImage": { 1521 | "url": "", 1522 | "fullWidth": true, 1523 | "repeat": "no-repeat", 1524 | "size": "cover", 1525 | "position": "center" 1526 | }, 1527 | "popupOverlay_backgroundColor": "rgba(0, 0, 0, 0.1)", 1528 | "popupCloseButton_position": "top-right", 1529 | "popupCloseButton_backgroundColor": "#DDDDDD", 1530 | "popupCloseButton_iconColor": "#000000", 1531 | "popupCloseButton_borderRadius": "0px", 1532 | "popupCloseButton_margin": "0px", 1533 | "popupCloseButton_action": { 1534 | "name": "close_popup", 1535 | "attrs": { 1536 | "onClick": "document.querySelector('.u-popup-container').style.display = 'none';" 1537 | } 1538 | }, 1539 | "backgroundColor": "#000000", 1540 | "backgroundImage": { 1541 | "url": "", 1542 | "fullWidth": true, 1543 | "repeat": "no-repeat", 1544 | "size": "custom", 1545 | "position": "center" 1546 | }, 1547 | "preheaderText": "", 1548 | "linkStyle": { 1549 | "body": true, 1550 | "linkColor": "#0071e3", 1551 | "linkHoverColor": "#0000ee", 1552 | "linkUnderline": true, 1553 | "linkHoverUnderline": true, 1554 | "inherit": false 1555 | }, 1556 | "_meta": { 1557 | "htmlID": "u_body", 1558 | "htmlClassNames": "u_body" 1559 | } 1560 | } 1561 | }, 1562 | "schemaVersion": 12 1563 | } --------------------------------------------------------------------------------