In this tutorial, we will show you how to completely customize the look and feel of the advanced crowdfunding widget residing on your website. This widget can then be easily shared with short snippet of HTML code during campaign creation process.
Step 1. Ensure you have access to the files for your website instance and download them to your local computer. You may refer to the New Web UI Development Workflow to get a head start on how to test the site and do development locally. Also, you should know a bit about Angular 2, TypeScript, and be comfortable with using the command line tools before reading this tutorial.
Step 2. When you navigate into the src folder you just downloaded, you should see there is another folder called widget, which contains the source code for the Advanced CrowdFunding Widget. 
Step 3. Such widget can be embedded into any website with a snippet of code. You can read more on that in this post. Inside widget, you need to open your terminal and first run:
npm install
This will install all the dependencies including Angular 2, gulp, Webpack, etc. required for the development of the widget. All of the source code is in app folder, it contains all the modules, components, directives and services in TypeScript. You can run a local server that reloads on change by running:
npm run play
This will run server on localhost:8080. If you would like to run on other ports, you can add port flag to this line in package.json:
"play": "webpack-dev-server --inline --port 5000"
Whenever you make changes in HTML or other TypeScript files, webpack-dev-server will transpile, bundle, serve files, and then auto-reload the page.
After you are satisfied with the changes, you can run:
npm run build
This will make webpack bundle the package, and use gulp to output all the necessary files for widget in production mode inside production directory. Note that this step is also required if you would like to view the widget inside your Thrinacia Atlas Web UI on the localhost.
To update your website, since your widget code is different now, you need to navigate yourself out of widget folder so you end up inside the src folder. You can then run:
gulp
This command will create the production code and output the final code into the angapp folder. For more information on Web UI custom development you can read New Web UI Development Workflow.