Create a Secure Raven Login Page on Your Own Website

How To

Create a Secure Raven Login Page on Your Own Website

If you have a Pro, Agency, or Enterprise account, you can white label your account with custom colors and your own logo. When you add your own logo, it replaces the Raven logo with your own. If you create a custom subdomain for your account – myname.raventools.com – your login page will also use your logo.

Raven Login Page
While this is a nice feature to have, it’s still fairly generic. We knew that some users would want to have a login page that was more consistent with their own branding, which is why we created the Login Widget.

How to Use the Raven Login Widget

The Raven Login Widget allows you to easily place a secure login form on your own website. The only requirement for using the widget is that you must have a subdomain (available only to Pro, Agency, and Enterprise accounts) or custom domain (available only to Agency and Enterprise accounts) set up on your account. The Custom Domain option is available to account owners in the Admin section.

Once a custom subdomain or domain is set up, the system will provide you with your Login Widget. The widget is a small piece of JavaScript that you can place inside an HTML document. The widget outputs a login, and the HTML looks like this:

<form id=”ravenlogin” method=”post” action=””>
  <fieldset>
    <legend>Login Form</legend>
    <p class=”ravenusername”><label for=”username”>Username:</label><span><input type=”text” name=”username” /></span></p>
    <p class=”ravenpassword”><label for=”password”>Password:</label><span><input class=”text” type=”password” name=”password” /></span></p>
    <p class=”ravensubmit”><label for=”submit”> </label><span><input type=”submit” value=”Login” name=”submit” /></span></p>
  </fieldset>
</form>

CSS IDs and classes are assigned to the main HTML elements, allowing you to control the layout and appearance of the login form.

#ravenlogin
Assigned to FORM element
.ravenusername
Assigned to P element for the Username label and input field
.ravenpassword
Assigned to P element for the Password label and input field
.ravensubmit
Assigned to P element for the Password label and input field

Custom Login Form Example

Here’s an example of how the login form can look on your own website.

Login Example

Comments are closed on this post