mail.html

<div>&nbsp;<div style="background: #eee; padding: 20px; font-family: \'HelveticaNeue\', \'Helvetica Neue\', \'Helvetica\', sans-serif"> <div style="box-sizing: border-box; background: #fff; max-width: 600px; padding: 50px; margin: 0 auto; border-radius: 4px; border: 1px solid #ddd; box-shadow: 0 3px 3px #ddd;"> <div style="text-align: center; font-weight: bold; font-size: 110%; margin-bottom: 50px"> Oswald API Key </div><div style="line-height: 1.5"> <p> Hey Anand, it&rsquo;s great to meet you! </p>
<p>
    <a style="background: #2790f3; color: #fff; padding: 10px 15px; border-radius: 4px; display: inline-block; text-decoration: none;" target="_blank" href="https://oswald.foundation">Visit Oswald Foundation &rsaquo;</a>
</p>
<p> Thanks for registering for an API key and implementing accessibility features in your website. We&rsquo;d like to welcome you to the Oswald Developer Community. Your credentials are as follows: </p><p style="margin-top: 40px"> <strong style="display: inline-block; width: 20%; min-width: 150px; margin-bottom: 10px">API Key: </strong> <code style="background: #eee; padding: 5px; border: 1px solid #aaa; border-radius: 3px">' . $apiKey . '</code> </p><p style="margin-bottom: 35px"> <strong style="display: inline-block; width: 20%; min-width: 150px; margin-bottom: 10px">API Secret: </strong> <code style="background: #eee; padding: 5px; border: 1px solid #aaa; border-radius: 3px">' . $apiSecret . '</code> </p><p> The best part about the Oswald Accessibility Widget is how easy it is to implement in your products. Add the following code before the <code>&lt;/body&gt;</code> tag on your webpage: </p><pre style="background: #eee; padding: 5px; border: 1px solid #aaa; border-radius: 3px; color: #2980b9; white-space: normal"><span style="color: purple">&lt;script</span> <span style="color: #c33">src="</span>https://oswald.foundation/developers/widget?key=<strong>' . $apiKey . '</strong><span style="color: #c33">"</span><span style="color: purple">&gt;&lt;/script&gt;</span></pre> <p> Next, all you need to do is add a <code>data-oswald</code> attribute to an element, and Oswald will be triggered when a user clicks on it. </p><pre style="background: #eee; padding: 5px; border: 1px solid #aaa; border-radius: 3px; color: #2980b9; white-space: normal"><span style="color: purple">&lt;button</span> <span style="color: #c33">data-oswald</span><span style="color: purple">&gt;<span style="color: #555">Accessibility Options</span>&lt;/button&gt;</span></pre> <p> That&rsquo;s it! If you have any questions, feel free to head to the <a style="color: #2790f3" target="_blank" href="https://github.com/AnandChowdhary/oswald-api">API documentation</a> or send an email at <a style="color: #2790f3" target="_blank" href="mailto:hello@oswald.foundation">hello@oswald.foundation</a>. To view the analytics of your widget usage, including geolocation, you can <a style="color: #2790f3" target="_blank" href="https://oswald.foundation/developers">log in</a> to the Developer dashboard using your API credentials. </p><p style="margin-bottom: 0"> Oswald Foundation </p></div></div></div></div>