Embed an ecConnect Login Screen into your Council Website

If you’d like to give your providers easy access to the ecConnect Portal straight from your own Council website, you can embed the login screen using the code below.


To include this iFrame to allow providers to login to ecConnect from your website, simply include https://ecconnect.ecclacolorado.org/auth/big_embed page embedded in an iframe to your website.

Example HTML invocation code can be found below or attached.


It is very minimal and has no border of its own making it easy to just drop it over the top of some branded content that you control.


 

<html lang="en">
	<head>
		<meta charset="utf-8">
		<link rel=stylesheet type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
		<link rel=stylesheet type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
		<link href="https://ecconnect.ecclacolorado.org/css/vendor/bootstrap.min.css" media="all" type="text/css" rel="stylesheet">
		<link href="https://ecconnect.ecclacolorado.org/css/style.css" media="all" type="text/css" rel="stylesheet">
		<style type="text/css">
			html,body,form{
				display:block;margin:0;padding:0;width:100%;height:100%;box-sizing:border-box;
			}
			.row {
				margin-bottom:1em;
			}
			div#intro-text {
				border: solid lightgray 1px;
				border-radius: 0.4em;
			}
			.form-horizontal .control-label{
				float: left;
				width: 75px;
				padding-top: 5px;
				text-align: right;
			}
			.form-horizontal .controls{
				margin-left:80px;
			}
		</style>
	</head>
	<body>
		<form class="form-horizontal form-validate" id="loginForm" target="_blank" method="POST" action="https://ecconnect.ecclacolorado.org/auth/login" accept-charset="UTF-8">		<ul class="nav nav-tabs" id="tabs">
			<li class="active"><a href="#login" data-toggle="tab">Login</a></li>
			<li><a target="_blank" href="/auth/login/#register" data-toggle="tab">Create an Account</a></li>
		</ul>
		<div id="tabContent" class="tab-content">
			<div class="tab-pane  active  in" id="login">
				<br>
				<fieldset>
					<!-- username field -->
					<div class="control-group">
						<label class="control-label" for="username">Email</label>

						<div class="controls">
							<input type="text" name="username" id="username" placeholder=""
									 value=""
									 data-required="true">
						</div>
					</div>
					<!-- password field -->
					<div class="control-group">
						<label class="control-label" for="password">Password</label>

						<div class="controls">
							<input type="password" name="password" id="password" placeholder=""
									 value=""
									 data-required="true">
							<br><br>

							<p><a href="https://ecconnect.ecclacolorado.org/auth/forgot/password" target="_blank">Forgot your password?</a></p>
						</div>
					</div>
					<!-- submit button -->
					<div class="control-group">
						<div class="controls">
							<p>
								<button class="btn btn-success" type="submit" value="login">Login</button>
							</p>
						</div>
					</div>
				</fieldset>
			</div>
		</div>
		</form>	</body>
</html>