Magic Docs

Installing Magic with jQuery

To start using Magic, you need to do three things.

First, add the following tag to the head of your page (after jQuery, which is currently required):

<script src="https://js.magicsignup.com/magic.v3.js"></script>

Second, start Magic by including the following script somewhere on your page. Don't forget to replace id_of_your_form with the correct HTML ID of your form and api_key_here with your API key.

<script>
$(function() {
  $("#id_of_your_form").magic({
    api_key: "api_key_here"
  });
});
</script>

Third, add the correct data-magic attributes to your form input tags. Your form might end up looking something like this:

<form action="/signup" method="post" id="id_of_your_form" >
  <input type="text" name="email" data-magic="email">
  <input type="password" name="password">
  <!-- The following fields will be filled by Magic. -->
  <input type="text" name="username" data-magic="username">
  <input type="text" name="first_name" data-magic="first_name">
  <input type="text" name="last_name" data-magic="last_name">
  <input type="hidden" name="personal_website" data-magic="personal_website">
</form>

That's it. You’re done.

Supported fields

We currently support the following field types:

data-magic="email"            # (required field)
data-magic="first_name"       # The first name of the user
data-magic="last_name"        # The last name of the user
data-magic="username"         # The user's common username
data-magic="twitter"          # The user's Twitter handle
data-magic="bio"              # The user's tagline or bio
data-magic="personal_website" # The user's personal website
data-magic="facebook"         # The user's Facebook handle or ID
data-magic="github"           # The user's Github username
data-magic="avatar"           # A URL to the user's avatar

Advanced features

Callbacks

Magic also includes optional support for setup, success, fail, and complete callbacks. You can use these callbacks to add a loading indicator to your form, for example. Using Spin.js, you can add add a <div class="loading"></div> tag next to each input field on your form and activate the spinners like this:

<script>
$(function() {
  $("#id_of_your_form").magic({
    api_key: "api_key_here",
    setup: function(){
      // Start the loader when Magic starts.
      $("div.loading").spin("loader", "gray")
    },
    complete: function(){
      // Stop the loader when Magic is finished.
      $("div.loading").spin(false)
    }
  });
});
</script>

The following callbacks are available:

setup       # Called when Magic begins performing an email lookup
success     # Called if Magic has successfully added data to the form.
fail        # Called if Magic was unable to find more data.
complete    # Called after Magic has finished, successfully or not
  

Direct API access

Coming soon.

Help

If you need any help at all, email us: hi@neutralcorporation.com