Have a sister-site where your users often go first before coming to your RideAmigos site? Want to allow them to log in on that site then seamlessly transition to their dashboard? Not an issue. We are readying a new widget that you’ll be able to implement and customize via style sheets. Check out the information below for a quick how-to.

Technical directions

    • The Login Widget will embed a login form on your website which will allow users to login to the full application without leaving the current page.
    • The “embed code” is a very small block of code that displays the widget on your website at the location you specify.
    • To use the “embed code”:
      1. Copy and paste the following line into your website code at wherever on your page you would like the widget to be displayed:
        <div id="ra-login-widget"></div>
        <script id="ra-login-embedjs" src="https://YOUR-RIDEAMIGOS-DOMAIN/login-widget/embed.js?v=1" type="text/javascript"></script>
      2. Change `YOUR-RIDEAMIGOS-DOMAIN` to match the domain name of your RideAmigos platform.
      3. Save your code and try it out!

Customization

    • By default, the widget has basic/minimal styling. There are a few configuration options currently available. To use them, add `data-*` attributes to the style element of your embed code. For example:
        • data-custom-stylesheet=”[URL TO YOUR CUSTOM CSS FILE]” allows you to inject your own stylesheet into the widget.
        • data-disable-default-stylesheet=”true” allows you to completely disable any default widget styles.

 Example

    • This sample markup and script can be used for testing:
      <div id="ra-login-widget"></div>
      <script id="ra-tripplan-embedjs" src="https://bloomington-develop.rideamigos.com/login-widget/embed.js?v=1" type="text/javascript"></script>

Developer notes

    • The widget consists of a few primary files:
        • `widget.html` – The source of the widget to be displayed.
        • `embed.js` – The main script, which gets concatenated with other required js files and placed in the destination directory as `embed.js`
        • `iframeResizer.min.js` – Gets included into the compiled `embed.js`. Maintains accurate iFrame height. http://davidjbradshaw.github.io/iframe-resizer/
        • `iframeResizer.contentWindow.min.js` – Is included in the head of `widget.html`. Maintains accurate iFrame height. https://github.com/davidjbradshaw/iframe-resizer