Implementation

Copyright Widget SDK Integration Guide

This guide provides detailed instructions for integrating the widget SDK into your project.

1. Install the SDK

Add the SDK files to your project by including the following <script> and <link> tags in your HTML file:

<link rel="stylesheet" href="https://dhsieq44txzc4.cloudfront.net/dev/sdk-widget.css">
<script src="https://dhsieq44txzc4.cloudfront.net/dev/sdk-widget.iife.js"></script>

2. Initialize the SDK

Initialize the widget by calling the initBlinderWidget function after the page loads:

<script>
  window.addEventListener('load', () => {
    window.initAuthorshipWidget({
      public_key: 'your-public-key',
      additional_open_id: 'blider_widget_button',
      ui_config: {
        floating_button_bg: '#3498db',
        floating_button_text_color: '#ffffff',
        floating_button_text: 'Protect Doc',
      },
    });
  });
</script>

Widget Configuration

The widget configuration object passed to initBlinderWidget allows you to customize the widget's behavior and appearance.

WidgetConfig Interface

Property
Type
Required
Description

public_key

string

Yes

Your public API key for accessing the widget services.

additional_open_id

string

No

The ID of an HTML element that triggers the widget when clicked.

the_mode

string

No

An optional mode for the widget's behavior.

ui_config

UiConfig

No

An object to customize the widget's appearance.

UiConfig Interface

The UiConfig object lets you style the widget's floating button.

Property
Type
Default Value
Description

floating_button_bg

string

undefined

Background color of the floating button. Accepts valid CSS color values.

floating_button_text_color

string

undefined

Text color of the floating button. Accepts valid CSS color values.

floating_button_text

string

undefined

Text displayed inside the floating button.

Example Integration

Here’s a complete example of integrating the widget into an HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://dhsieq44txzc4.cloudfront.net/dev/sdk-widget.css">
    <script src="https://dhsieq44txzc4.cloudfront.net/dev/sdk-widget.iife.js"></script>
  </head>
  <body>
    <div id="blider_widget_button">Click Me!</div>

    <script>
      window.addEventListener('load', () => {
        window.initAuthorshipWidget({
          public_key: 'your-public-key',
          additional_open_id: 'blider_widget_button',
          ui_config: {
            floating_button_bg: '#3498db',
            floating_button_text_color: '#ffffff',
            floating_button_text: 'Protect Doc',
          },
        });
      });
    </script>
  </body>
</html>

Notes

  • Replace your-public-key with the API key provided for your account.

  • Use additional_open_id to specify a trigger element ID for the widget.

  • Customize the UiConfig to match your design requirements.

Last updated