Social Boost Development Instructions

Social Boost refers to the act of inviting friends to assist in gaining additional discounts, rewards, or get whitelisted, etc. It can help web3 projects with user acquisition. This document will outline the necessary development tasks for using this event and provide an example implementation code for reference.

1. Obtain an SDN developer key

This key distinguishes users across various projects and is used for gathering operational data in events and chats.

Email developer@sending.network with the subject "Developer Key Request." Include your name and a brief project overview, detailing its purpose and scope.

2. Integrate SDN Chat Widget

The SDN chat widget is a chat tool that can be easily integrated into your website using a few lines of code. The event page will appear in an iframe window within the widget. To start, integrate the widget into your website. You can access the SDK Documentation here.

3. Recognize Event Links

When project operators create an event, a unique event link is generated: https://DOMAIN_NAME/event/{id}.

Following user-initiated boosts, distinct share links are formed, containing event and boost IDs.

4. (Optional) Web Page Entrance

You can add a button for users to initiate boosts. Clicking should:

  1. (If applicable) Check boost prerequisites, for instance, ensuring users have registered on your website beforehand. Skip this step if no special requirements exist.

  2. Open the chat widget window with window.chatWidgetApi.showWidget(isShow).

  3. Log into the chat widget via window.chatWidgetApi.DIDLogin. If you'd like to connect the website login and chat widget login together, please refer to the method here.

  4. The event page will show and the user can start inviting friends to help.

Miscellaneous

Image

Event operators can assign event banners and reward icons using image URLs. Ensure that these images do not require CORS authentication to prevent loading issues. For images on your server, grant access permission to the following domain:

  • https://eventadmin.sending.network

  • https://events.sending.network

Example Implementation Code

If you require a customized event address, embed sdnChatWidget.js into your project page and refer to the mentioned methods for passing or parsing URL parameters.

<body>
  <div>
    <button onclick="onClickBoost()">Social Boost</button>
  </div>
  <chat-component id="chat" baseUrl="https://portal0101.sending.network" defaultShowWidget="false" />
  <script>
    // url params
    var url = new URL(window.location.href);
    // eventId represents the ID of the event created by the user
    var eventId = url.searchParams.get('event');
    // boostId represents the ID of the specific boost created by the user
    var boostId = url.searchParams.get('boost');

    var homeUrl = "https://events.sending.network";
    var eventUrl = "";
    if (boostId && eventId) {
      eventUrl = homeUrl + "/boost/" + eventId + "?part_id=" + boostId;
    } else if (eventId) {
      eventUrl = homeUrl + "/info/" + eventId;
    }

    async function register() {
      // You can call your webpage's registration method here and return a Promise object.
      // Feel free to replace it with any desired user behavior, like joining the project community.
      // Return a fulfilled status when condition is met, and the widget will handle subsequent actions automatically.
      return ethereum.enable();
    }
    // Bind it to the chatWidgetApi, and when new users click the "Boost" button  in the event, the register method will be automatically triggered.
    chatWidgetApi.bindThirdRegister(register);

    // This is the first way for user to participate: through link redirection.
    // With this approach, parameters will be passed through the URL to the event page.
    // When users click the link somewhere else, they are directly redirected to the event page.
    if (eventUrl) {
      document.getElementById("chat").setAttribute("openDappUrl", eventUrl);
      document.getElementById("chat").setAttribute("defaultShowWidget", "true");
    }

    // This is the second method for user to participate: by clicking a button.
    // With this approach, you bind the generated event link to a button.
    // When users click the button, the event page automatically pops up.
    function onClickBoost() {
      chatWidgetApi.showWidget(true);
      chatWidgetApi.openDappUrl(homeUrl + "/info/" + eventId);
    }
  </script>
</body>
PreviousDeveloper KeyNextEdge Node Deployment Tutorial

Last updated