Dynamic Variables Within Custom Embed Code

Ability to dynamically change specific sections of the code using custom variables. For example, to change the name of a person in a HTML form or HTML document.

Example code where it would be amazing to change the name, address, and other person identifying info via custom variables:

<!DOCTYPE html>

<head>

<title>Acceptance Letter Signature</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

font-family: 'Cormorant Garamond', serif;

padding: 5px;

}

.letter-container {

position: relative;

width: 650px;

max-width: 95vw;

background: linear-gradient(to bottom, #fdfbf7 0%, #f8f6f0 100%);

padding: 60px 50px;

box-shadow:

0 20px 60px rgba(0, 0, 0, 0.4),

0 0 0 1px rgba(139, 115, 85, 0.1),

inset 0 1px 0 rgba(255, 255, 255, 0.6);

border-radius: 2px;

}

.header {

display: flex;

align-items: center;

gap: 20px;

margin-bottom: 40px;

}

.logo-container {

flex-shrink: 0;

}

.shield {

width: 80px;

height: 95px;

position: relative;

}

.shield-outline {

width: 100%;

height: 100%;

background: linear-gradient(135deg, #a51c30 0%, #8b1a2a 100%);

clip-path: polygon(50% 0%, 100% 20%, 100% 75%, 50% 100%, 0% 75%, 0% 20%);

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

padding: 8px;

box-shadow: 0 4px 12px rgba(165, 28, 48, 0.3);

}

.shield-banner {

width: 90%;

height: 12px;

background: #1a1a1a;

margin: 3px 0;

display: flex;

align-items: center;

justify-content: center;

font-size: 6px;

color: #fdfbf7;

letter-spacing: 0.5px;

}

.shield-section {

width: 90%;

height: 18px;

background: #fdfbf7;

margin: 2px 0;

display: flex;

align-items: center;

justify-content: center;

}

.book {

width: 8px;

height: 10px;

background: #a51c30;

margin: 0 1px;

border-radius: 1px;

}

.school-name-container {

flex-grow: 1;

}

.university-name {

font-family: 'Playfair Display', serif;

font-size: 36px;

font-weight: 700;

color: #2c2416;

letter-spacing: 1px;

margin-bottom: 0;

line-height: 1;

}

.school-subtitle {

font-family: 'Playfair Display', serif;

font-size: 24px;

font-weight: 400;

color: #2c2416;

letter-spacing: 0.5px;

margin-top: 4px;

}

.established {

font-size: 12px;

letter-spacing: 3px;

color: #8b7355;

text-transform: uppercase;

}

.date {

font-size: 15px;

color: #3a3226;

margin-bottom: 20px;

}

.recipient-info {

font-size: 15px;

color: #3a3226;

line-height: 1.6;

margin-bottom: 20px;

}

.student-name-field {

font-weight: 400;

opacity: 0;

animation: fadeIn 0.8s ease-out 0.5s forwards;

}

.student-address {

opacity: 0;

animation: fadeIn 0.8s ease-out 0.8s forwards;

}

@keyframes fadeIn {

to {

opacity: 1;

}

.letter-content {

color: #3a3226;

font-size: 16px;

line-height: 1.8;

margin-bottom: 20px;

}

.salutation {

margin-bottom: 15px;

font-weight: 400;

opacity: 0;

animation: fadeIn 0.8s ease-out 1.1s forwards;

}

.body-text {

margin-bottom: 15px;

text-align: justify;

}

.signature-section {

position: relative;

margin-top: 10px;

padding-left: 0;

}

.closing {

margin-bottom: 20px;

font-size: 16px;

color: #3a3226;

}

.signature-line {

position: relative;

height: 50px;

margin-bottom: 5px;

}

.signature-text {

font-family: 'Great Vibes', cursive;

font-size: 38px;

color: #1a1a2e;

}

.title {

font-size: 14px;

color: #3a3226;

line-height: 1.5;

}

@media (max-width: 768px) {

.letter-container {

padding: 40px 30px;

}

.header {

gap: 15px;

}

.shield {

width: 60px;

height: 72px;

}

.university-name {

font-size: 28px;

}

.school-subtitle {

font-size: 18px;

}

.date {

font-size: 14px;

}

.recipient-info {

font-size: 14px;

}

.letter-content {

font-size: 14px;

}

.signature-text {

font-size: 32px;

}

</style>

</head>

<body>

</div>

</div>

</div>

<div class="university-name">HARVARD</div>

<div class="school-subtitle">Extension School</div>

</div>

</div>

I am pleased to inform you that you have been admitted as a candidate for the degree of Master of Liberal Arts (ALM) in extension studies, in the field of Journalism.

</div>

Admission to a Harvard Extension School (HES) degree program signifies that you have ably demonstrated your capacity to meet the rigorous academic challenges found at Harvard. The entire HES administration therefore joins me in congratulating you on this accomplishment and also in reaffirming our collective commitment to the future academic success of talented and motivated students like yourself.

</div>

This is the most dynamic time in higher education in the past 100 years, and I hope you are as excited as I am to be a part of it and to be a part of the Harvard Extension School and Harvard University communities.

</div>

With best wishes for continued success in your studies,

</div>

<div class="closing">Sincerely,</div>

<div class="signature-text">Suzanne Spreadbury</div>

</div>

<div class="title">Suzanne Spreadbury, PhD</div>

<div class="title">Dean of Academic Programs</div>

<div class="title">& Chief Academic Officer</div>

</div>

// CONFIGURATION: Change student details here

const STUDENT_DATA = {

firstName: "Inna",

fullName: "Inna Lisker",

address: "Laguna Niguel, California 92677",

country: "United States",

date: "June 7, 2019"

};

// Populate letter fields

document.getElementById('letter-date').textContent = STUDENT_DATA.date;

document.getElementById('student-name').textContent = STUDENT_DATA.fullName;

document.getElementById('student-address').textContent = STUDENT_DATA.address;

document.getElementById('student-country').textContent = STUDENT_DATA.country;

document.getElementById('salutation').textContent = Dear ${STUDENT_DATA.firstName},;

// Optional: For batch processing via URL parameters

// Example: acceptance.html?firstName=John&fullName=John+Smith&address=New+York,+NY+10001&country=United+States&date=June+15,+2024

const urlParams = new URLSearchParams(window.location.search);

if (urlParams.get('firstName')) {

const urlData = {

firstName: urlParams.get('firstName'),

fullName: urlParams.get('fullName'),

address: urlParams.get('address'),

country: urlParams.get('country'),

date: urlParams.get('date')

};

document.getElementById('letter-date').textContent = urlData.date;

document.getElementById('student-name').textContent = urlData.fullName;

document.getElementById('student-address').textContent = urlData.address;

document.getElementById('student-country').textContent = urlData.country;

document.getElementById('salutation').textContent = Dear ${urlData.firstName},;

}

</script>

</body>

</html>

Sendr

Dynamic Variables Within Custom Embed Code

Subscribe to post

Subscribe to post