Configure MobbSign Web · Mobbeel for developers

Prepare your application to use MobbSign Web

In your ./node_modules/@mobbeel/mobbsign you should have the following files that should be accessible from a browser:
- assets/img/
- assets/css/styles.min.css
- config.js
- mobbsign.js
- locales/
Make sure all MobbSign web content is accessible from your application and is public for the browser to use.
Include assets/css/styles.min.css as another style sheet for your application.
Add an HTML element where MobbSign will be rendered. For example:
```
<div id="mobbsign">
  
</div>
```
NOTE: This element should have a CSS position: relative and a defined width and/or height.

Declare MobbSign

HTML / JavaScript

TypeScript

Declare mobbsign.js as another javascript file in your application or import it in order to use MobbSign class:

<head>
    <script src="node_modules/@mobbeel/mobbsign/mobbsign.js"></script>
</head>
<script>
    const viewerPromise = new MobbSign({...});
</script>

You may need to declare the mobbsign module and its type before using it. To do this, create a file mobbsign.d.ts in the root of your project and add:

declare module '@mobbeel/mobbsign';

You can then use MobbSign in your TypeScript component:

import MobbSign from '@mobbeel/mobbsign';

export class MobbsignComponent {
    new MobbSign({...});
}

Use MobbSign Web

In order to use MobbSign Web, a MobbSign object must be created using its constructor. It returns a configured MobbSign instance in a Promise. You should use that instance later to load a document and sign it.

new MobbSign({
    // config parameters
}).then((mobbsign) => {
    mobbsign.load('documentId');
});

Check API for a full description of MobbSign constructor and its parameters

Basic example

Let's explain it with an example: the minimum necessary MobbSign Web configuration to be able to visualize a document and sign it:

mobbsign.component.html

mobbsign.component.css

mobbsign.component.ts

<main>
  <section class="container">
    <div class="item">
      <div id="mobbsign"></div>
    </div>
  </section>
</main>

#mobbsign {
  height: 100%;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 1px;
  box-sizing: border-box;
}

.container {
  display: flex;
  height: 80vh;
}

.item {
  position: relative;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

import MobbSign from '@mobbeel/mobbsign';
@Component({
  selector: 'app-mobbsign',
  templateUrl: './mobbsign.component.html',
  styleUrls: ['./mobbsign.component.css'],
})
export class MobbsignComponent implements OnInit {
  ngOnInit() {
    // Start MobbSign viewer
    new MobbSign({
      root: document.getElementById('mobbsign'),
      endpoint: environment.apiUrl,
      apiKey: `apiKey`,
      appID: `appId`,
      language: 'en',
      onDocumentLoaded: () => console.log('document loaded'),
      onSignatureAcquired: () => console.log('signature acquired'),
      onSignatureDiscarded: () => console.log('signature discarded'),
      onSignatureConfirmed: () => console.log('signature confirmed'),
      onDocumentSigned: () => console.log('document signed'),
      onError: (e: any) => console.error(e);
      onDone: () => console.log('process done');
      configPath: '../../assets/config',
      libPath: '../../assets/lib',
      imgUrl: './../../../assets/img',
      localesUrl: './../../../locales',
      blockNoTactileDevices: false,
      signatureAcquisitionTimeout: 3000
    }).then((mobbsign: any) => {
      mobbsign.load(`documentId`);
    });
  }
}