Login button

Description

Partner applications can use the Socios.com login button to allow their users to log into their Socios.com account from a third-party environment.

Clicking on this button opens the Socios.com Connect login modal (such as any OAuth login system such as Google's, Facebook's, etc.) which in turn allows the third-party application to access Socios.com user data on the user's behalf.

Sample button

This example doesn't onboard all the OAuth mechanism, this is only a front-end example.

To fully implement it, you will need to dive into the rest of the Partner API documentation, notably the Authentication part.

Here is the official Socios.com login button:

And here is the needed CSS code to display it into a partner website:

<style>
  .sociosComLoginButton {
    background-color: rgb(0, 33, 55);
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    padding: 15px 20px;
    white-space: nowrap;
  }

  .sociosComLoginButton:hover {
    background-color: rgb(0, 46, 77);
  }

  .sociosComLoginButton span {
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .sociosComLoginButton img {
    margin-right: 10px;
  }
</style>

<button type="button" class="sociosComLoginButton">
  <span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAUCAYAAACAl21KAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAIbSURBVHgBpVRLbhpBEK0qMJEAybAI3lhJs0giK4hM32C4gXMD5wTGJyA5Ac4JjE9gbgA3GPMLSybrYGUixYlkM12pxgwM4yHK50mt/lT1e1X9KQSB53kqk8u5bIyDQM8ZwbHrwKxggwAQA2T2ATBgMAMD0Idi8VpXqwEOh+O2bGzC/8DAWZYJj0V5rYrAfZl9RqLrpL9ErKQrIeIb2eKuDQStbDGfV99vbyVq6NRrtXfwh/C8qcpkF20GCUTIqVDILw0h8yX8BbQ+8iG2h8rlMvwrQjn8NVFubw8OKk+BEJ00Z2Z2ePv2UkHS/INKBZ4dHp56s1kpQXIinSettxpvIUOkVsPAEi3zLO3vK0cpb4e6XbsQm21rsfDuritXeSnPpxspn/M2WrGoXGmzmM2OXdgFMTYTZFdRdLaX1tkllkamUtRL8TP7nT2NMEp1liYWBN++xsg232swGr0fDMbNxAZ3l9pwPO59md9ERK5ds7cGZpHtAHJLHNqRs/ynPsYeXARvOlX2n81v5nb60fot/dcOw8kJIV8Ig28y1NBH8gWSJJOJQwxXtrw8yeX8Vy9f6EiMIiddf90xwB+sEy3C2Wg0aVn1TfqfTslwb1mjROznj7ARjxgfqcp5EWBrlZ+PDFJOuCSlxX1Ygn54X3irdXUr7UdED2kOj4ky7USFBINwpmu187Q9lLao6/WuuaeGff5RFGaBeheJxS+TpX6sx8ZIugAAAABJRU5ErkJggg==" />Connect with Socios.com</span>
</button>