The frontend has three different ways to be customized:

1. CSS Styling
2. Images and sounds
3. SIP configuration

All of the colors, borders, padding, layout, etc. of the website is customized through CSS styles. The themes and colors of the website can easily be changed by just manipulating the CSS of the page. The CSS file can be modified as needed and is loaded into the page in the App.js file: import "../dist/main.css";. This line ensures the CSS file is loaded into the bundle when it is created, allowing it to be included in the website.

Images and sounds can be included into the webpack bundle by adding them into the assets directory. When an object is added to the assets directory, it must be loaded into the bundle with url-loader. For example, assume a file "test.jpg" exists in the assets folder. It must be imported into the javascript with import testimage from "../../assets/test.jpg. This will ensure that the image is loaded into the javascript bundle as the file path is loaded through url-loader when the bundle is created.

Currently, url-loader is only configured to recognize the folowing file extensions:
.bmp, .gif, .jpg, .jpeg, .png, .ogg

In order to allow different file types to be loaded into the bundle, configure webpack's file loader module to allow for additional file types. The configuration for url-loader is as follows

            {
                test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.ogg$/],
                loader: require.resolve("url-loader"),
                options: {
                    limit: 10000,
                    name: "../dist/images/[name].[ext]",
                },
            },

By adding more file extensions to the test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.ogg$/], line of the url-loader module configuration, additional file types can be matched. The matching is done through a regular expression.

Sounds that are produced on the website are generated from the AudioController file. This file allows audio to be played/paused from anywhere on the page. The following audio files are present:
tone_click - a phone hangup 'click' noise.
tone_0 - a phone when dialing 0
tone_1 - a phone when dialing 1
tone_2 - a phone when dialing 2
tone_3 - a phone when dialing 3
tone_4 - a phone when dialing 4
tone_5 - a phone when dialing 5
tone_6 - a phone when dialing 6
tone_7 - a phone when dialing 7
tone_8 - a phone when dialing 8
tone_9 - a phone when dialing 9
tone_busy - a phone when busy
tone_pound - a phone when dialing #
tone_ringback - a phone when a call is connecting
tone_star - a phone when dialing *
tone_ringtone - a sample phone ringtone

In order to replace these files:

Simply replace the file using the same name. The new file will be used instead of the original

See the section on Configuring url-loader for different file types above. Once this has been completed, add the new files to the assets folder. Change the import statements in the AudioController file to reference the new files that have been added. By changing the imports, the new tones should play.
If the old tones will still be used, add a new import statement and import the audio file. In the play(toneName, looped){...} function, add a case statement to the switch which will generate a new audio for the file you have added. When you want your audio to play, use AudioController.play('MyAudioName, shouldAudioLoop);`. Most sounds are generated in the Sip module

In order to use the SIP component, SIP needs to be configured in the config.js file.
Note: The repository provides a config.js.example file. This file should be copied, and .example should be removed from the filename in order for the javascript files to recognize the configuration file.

The SIP configuration file has the following configuration options: