` in the `` element: ```html

``` > `dwtcontrolContainer` is the default `id` for the `div` in the default DWT resources, and any of the Dynamsoft-provided demos. If you would like to use a different `id` for this `div`, you will need to change `Dynamsoft.DWT.Containers` in the file `dynamsoft.webtwain.config.js` to match. DWT has an event registration API, `Dynamsoft.DWT.RegisterEvent`, that we can use here to retrieve the initialized `WebTwain` object only when DWT is fully initialized. This `WebTwain` object is the entrypoint to most APIs in DWT. Include the following in the `head` element of `HelloWorld.html`: ```html ``` The next step is to use the DWT API to acquire an image from a scanner. ## Add Simple Scanning Functionality ### Create an HTML Scan Button Add this element in the HTML body to create a scanning button: ```html ``` ### Initiate a Scan from an Image Source Define the following function to handle scans, and add it in the `script` element created during initialization: ```javascript function AcquireImage() { if (DWTObject) { DWTObject.SelectSourceAsync().then( function () { return DWTObject.AcquireImageAsync( { IfCloseSourceAfterAcquire: true } ); } ).catch(function (exp) { alert(exp.message); }); } } ``` ## Review the Code At this point, `HelloWorld.html` should look like this: ```html

``` APIs used: - [`RegisterEvent()`](/_articles/info/api/Dynamsoft_WebTwainEnv.md#registerevent) - [`OnWebTwainReady`](/_articles/info/api/Dynamsoft_WebTwainEnv.md#onwebtwainready) - [`GetWebTwain()`](/_articles/info/api/Dynamsoft_WebTwainEnv.md#getwebtwain) - [`SelectSourceAsync()`](/_articles/info/api/WebTwain_Acquire.md#selectsourceasync) - [`AcquireImageAsync()`](/_articles/info/api/WebTwain_Acquire.md#acquireimageasync) - [`IfCloseSourceAfterAcquire`](/_articles/info/api/Device.md#deviceobjectacquireimage) ## Run the Application ### Open the Page in Your Browser Simply double click on `HelloWorld.html` in your file viewer, or right click on the HTML file and select a browser to open it with. In your browser, you should see a page with a scan button and an empty preview box. ![Build-the-Hello-World-Scan-Page-3](/assets/imgs/Build-the-Hello-World-Scan-Page-3.png) > Note: if you see a license notice, please make sure you have a valid license. Open `dynamsoft.webtwain.config.js` and ensure that you have a license defined at `Dynamsoft.DWT.ProductKey`. If you need further assistance, please contact [Dynamsoft Support](https://www.dynamsoft.com/web-twain/docs/about/getsupport.html). ### Press the Scan Button After pressing the Scan button, you will be presented with the Select Source dialog. Select your scanner and press the Select button. ![Build-the-Hello-World-Scan-Page-4](/assets/imgs/Build-the-Hello-World-Scan-Page-4.png) > Only TWAIN, WIA, ICA, or SANE compliant devices are listed in the Select Source dialog. If your connected scanner does not show up in the list, please confirm that the proper driver is installed. If you are using Windows and do not have a physical scanner on hand, you may install the TWAIN Virtual Scanner - a scanner simulator developed by the TWAIN Working Group for testing purposes. This guide uses the [TWAIN Virtual Scanner](/_articles/faq/download-virtual-scanner-for-testing.md) for reproducibility. ### Initiate a Scan from the Scanner UI You will be presented with your scanner's built-in interface after selecting the scanner. Initiate a scan from this dialog. Your scanner's interface may differ from the provided screenshot: ![Build-the-Hello-World-Scan-Page-UI](/assets/imgs/Build-the-Hello-World-Scan-Page-UI.png) ### View the Scanned Image After the scanner finishes scanning, the viewer will display the acquired images: ![Build-the-Hello-World-Scan-Page-5](/assets/imgs/Build-the-Hello-World-Scan-Page-5.png) You have just scanned an image using an image scanner controlled by a web application! ## Next Article The next article in this series will demonstrate [uploading images to the server](/_articles/hello-world/uploading.md).