Saved from https://apps.rackspace.com/a/webmail.php?wsid=10359416330249c588ff85b858175487-9528b87a1eb34a7380b9ce4057e6e683

main.html

<div id="custom-newsletter-embed"></div>
<script src="https://url-for-newsletter-embed.js"></script>

main2.html

<style>
	/* Inline CSS... */
</style>
<form>
	<input type="email" id="email">
	<button>Subscribe</button>
</form>

newsletter.js

(function () {

	// Get the element to embed into
	let embed = document.querySelector('#custom-newsletter-embed');
	if (!embed) return;

	// Inject the form and styles
	embed.innerHTML =
		`<style>
			/* Inline CSS... */
		</style>
		<form>
			<label for="email">Enter your email</label>
			<input type="email" id="email">
			<button>Subscribe</button>
		</form>
		<div role="status"></div>`;

	// Get newly created form elements
	let form = embed.querySelector('form');
	let announce = embed.querySelector('[role="status"]');

	// Handle submit events
	async function submitHandler (event) {

		// Stop the form from reloading
		event.preventDefault();

		// Make sure an email address was provided
		if (!form.email.value) {
			announce.textContent = 'Please enter a valid email address.';
			return;
		}

		try {

			// Call the API
			let request = await fetch('https://newsletter-api-endpoint.com', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({email: form.email.value})
			});

			// Get the response and show the message in the UI
			let response = await request.json();
			announce.textContent = response.msg;

		} catch (error) {

			// If something went wrong, show the error instead
			announce.textContent = error.msg;

		}

	}

	// Listen for submit events
	form.addEventListener('submit', submitHandler);

})();