To access and update logged-in user data programmatically, use the Outseta Embed JavaScript API. This allows you to create custom forms and functionality that integrate with your application without redirecting users to external pages.

You can retrieve the current user information and update both personal details (like name and email) and account-level properties (like name), including any custom properties you've configured.

Prerequisites

  • Include the Outseta Script on your page to make the JavaScript API available.
  • For this exact example to work, create the custom properties CoffeePreference (Person level) and TeamMotto (Account level) in your Outseta configuration.
  • Only logged-in users can access and update their data.
<!-- Outseta Script Options -->
<script>
  var o_options = {
    domain: "your-domain.outseta.com"
    // Plus the rest of your configurations
  };
</script>

<!-- Outseta Script (doing all the magic) -->
<script src="https://cdn.outseta.com/outseta.min.js" data-options="o_options"></script>

The Custom Snippet

The custom code snippet is shown here in a script tag. If you're using a framework, extract and adapt the core functionality to your framework's patterns.

<script>
  async function updateUserData(event) {
    event.preventDefault();
    
    // Get current authenticated user
    const user = await Outseta.getUser();
    
    // Prepare update data
    const formData = new FormData(event.target);
    const updateData = {
      FirstName: formData.get("FirstName"),
      CoffeePreference: formData.get("CoffeePreference"),
      Account: {
        Name: formData.get("CompanyName"),
        TeamMotto: formData.get("TeamMotto")
      }
    };
    
    try {
      const updatedUser = await user.update(updateData);
      event.target.reset();
      console.log("Updated:", updatedUser);
    } catch (error) {
      console.error("Update failed:", error);
    }
  }
</script>

Example Form

⚠️ This is a very simplistic example - in production, you'd want proper validation, styling, and error handling.

<form onsubmit="updateUserData(event)">
  <p>
    <label for="FirstName">First Name</label><br />
    <input id="FirstName" name="FirstName" />
  </p>
  <p>
    <label for="CoffeePreference">Coffee Preference</label><br />
    <input id="CoffeePreference" name="CoffeePreference" />
  </p>
  <p>
    <label for="CompanyName">Company Name</label><br />
    <input id="CompanyName" name="CompanyName" />
  </p>
  <p>
    <label for="TeamMotto">Team Motto</label><br />
    <input id="TeamMotto" name="TeamMotto" />
  </p>
  <button>Update</button>
</form>

Key Points

  • Use Outseta.getUser() to retrieve the authenticated user object
  • Call user.update() with an object containing the fields to update
  • You can update both Person properties and Account properties
  • Custom properties are supported for both Person and Account levels
  • Always implement error handling for failed updates

Full demo on Code Sandbox

See the complete CodeSandbox demo for a working example.