Usage: Launch Pro Pack from your web browser

Pro Pack is NOT a platform dependent software. In other words, there is no Executable file like .exe / .app as well. Pro Pack works by totally same way to open your website. Just extract zip after you download then double click "index.html" or drag the file into your web browser. Purely it will launch from your preferred web browser. This means you can use Pro Pack from wherever a web browser is installed. (Mac, Windows, Chrome OS, Android...)
After opening Pro Pack, you may need to follow "Quick Set up" that uploads several folders into your web server if you have purchased a web-hosting service as well as website domain. (You can skip this step but "Quick Set up" would help your custom widget loading more quickly.) For more information inside Pro Pack, please take a look at Videos below:

"Build Your Own" Wizard

Each wizard varies from across widget but basically follow this structure listed below:
Customize styles - You may need to input your preferred widget size (width / height as px).
Font styles - Select your preferred font, size (px), and color.
Optional settings - Customize some options as you want to set.
Insert contents - Add / Remove a content such as a photo, video, link, and description.
Verify the actual size of every photo - You will get the correct size of every photo.
Your website domain - This is optional. If you have done "Quick Set Up" for your site, you can input your website domain like "http://www.example.com". You can either leave this field as "http://beyondiweb.com" that is default.
Apply these settings - To get your custom code, must click this button after you have finished to customize. Finally, it will deliver your custom code.
Select code - There are three buttons to allow you to select & copy the entire code, the code in <head> / <body> tag each.
Make an iFrame - This will automatically create a HTML with your custom code then allow you to embed your custom widget with iFrame code.
Save / Load your settings - You can save your custom settings including contents, then load them whenever you want to re-edit.

Examples (Best Practices)

How to insert your custom widget into HTML editors

To see how to embed your custom code generated from "Build your own" wizard into your website, please click a web building tool listed in the right. (If your tool is not in the list, click "Web Editor".)

After pushing "Apply these settings" button from "Build your own" tool, you can get your custom code. Press Command+C (Mac) or Control+C (Windows) to copy the entire code. Go back to iWeb, and insert a new HTML snippet into a page. Then paste it into the HTML snippet, and click "Apply" button.

There are two ways to embed a custom widget into EverWeb: Insert iFrameInsert each code

[Insert iFrame]
After pushing 'Apply these settings' button from 'Build your own' tool, you can get your custom code. Push 'Make an iFrame' button, and press Command+C (Mac) or Control+C (Windows) to copy the iframe code. (you must download and upload the iframe into your website then replace 'src' to yours) Go back to EverWeb, and drag & drop a 'HTML Snippet widget' into a page. Paste it into the code box and click 'Apply' button. Choose 'Metrics' tab, and change the snippet size equal to the widget size.

[Insert code]
After pushing 'Apply these settings' button from 'Build your own' tool, you can get your custom code.
1) Push 'Select code in <head>' button, and press Command+C (Mac) or Control+C (Windows) to copy the code. Go back to EverWeb, and drag & drop a HTML Snippet widget into a page. Paste it into the code box.
2) Push 'Select code in <body>' button, and copy & paste it into the snippet code box of EverWeb (add right after the head code.) then click 'Apply' button.
3) Choose 'Metrics' tab from 'Inspector' , and change the snippet size equal to the widget size.

There are two ways to embed a custom widget into Dreamweaver: Insert iFrameInsert each code

[Insert iFrame]
After pushing "Apply these settings" button from "Build your own" tool, you can get your custom code. Push "Make an iFrame" button, and press Command+C (Mac) or Control+C (Windows) to copy the iframe code. (you must download and upload the iframe into your website then replace "src" to yours) Go back to Dreamweaver (split view is better), and paste it somewhere within <body> tag.

[Insert code]
After pushing "Apply these settings" button from "Build your own" tool, you can get your custom code.
1) Push "Select code in <head>" button, and press Command+C (Mac) or Control+C (Windows) to copy the code. Go back to Dreamweaver, and insert a new Snippet from Dreamweaver. (select a menu of the right pane) Select "Insert block" (input its name and description as well), and paste it into the code box.
2) Push "Select code in <body>" button, and copy & paste it into the snippet code box of Dreamweaver. (add right after the head code.)
3) In Dreamweaver, select the snippet and drag it into somewhere in a page.

There are two ways to embed a custom widget into Adobe Muse: Insert iFrameInsert each code

[Insert iFrame]
After pushing "Apply these settings" button from "Build your own" tool, you can get your custom code. Push "Make an iFrame" button, and press Command+C (Mac) or Control+C (Windows) to copy the iframe code. (you must download and upload the iframe into your website then replace "src" to yours) Go back to Adobe Muse, and insert Object > HTML. Then paste it into the HTML code box.

[Insert code]
After pushing "Apply these settings" button from "Build your own" tool, you can get your custom code.
1) Push "Select code in <head>" button, and press Command+C (Mac) or Control+C (Windows) to copy the code. Go back to Adobe Muse, and insert Object > HTML. Then paste it into the HTML code box.
2) Push "Select code in <body>" button, and copy & paste it into the HTML code box of Adobe Muse. (add right after the head code.)
* A widget which is embedded by this method may not work correctly. If a widget requires additional js files except for "jquery.min.js", it's strongly recommended to embed the widget with iFrame code.

There are two ways to embed a custom widget into Wordpress: Insert iFrameInsert each code

[Insert iFrame]
After pushing "Apply these settings" button from "Build your own" tool, you can get your custom code. Push "Make an iFrame" button, and press Command+C (Mac) or Control+C (Windows) to copy the iframe code. (you'd better download and upload the iframe into your website then replace "src" to yours.)
1) Install 'Raw HTML' plugin into your Wordpress.
2) In Wordpress, select a post / page to insert the iframe code, and choose 'Text' view NOT 'Visual' view).
3) Write [raw] [/raw], and paste the iframe code between [raw]...[/raw].

[Insert code]
After pushing "Apply these settings" button from "Build your own" tool, you can get your custom code.
1) Install "Raw HTML Snippets" plugin into your Wordpress.
2) Push "Select code in <head>" button, and press Command+C (Mac) or Control+C (Windows) to copy the code. Go back to Wordpress, and add a new Raw HTML Snippet from Wordpress. Paste it into the code box.
3) Push "Select code in <body>" button, and copy & paste it into the snippet code box of Wordpress. (add right after the head code.)
4) In Wordpress, write the snippet code like [raw_html_snippet id="YOUR SNIPPET NAME"].

There are 3 ways to embed a widget into Blogger: Insert into PostInsert into GadgetInsert into Template

[Insert into Post / Page]
After pushing 'Apply these settings' button from 'Build your own' tool, you can get your custom code. Push 'Make an iFrame' button, and press Command+C (Mac) or Control+C (Windows) to copy the iframe code. (you can download and upload the iframe into your Google Drive then replace 'src' to its public address) Go back to Blogger (must choose 'HTML' view NOT 'Compose' view), and paste it somewhere.
* Fancybox series may not work correctly.

[Insert into Gadget]
After pushing 'Apply these settings' button from 'Build your own' tool, you can get your custom code. Push 'Make an iFrame' button, and press Command+C (Mac) or Control+C (Windows) to copy the iframe code. (you can download and upload the iframe into your Google Drive then replace 'src' to its public address) Go back to Blogger, and add a 'HTML/JavaScript Gadget' into your Layout. Paste the iframe code into the Content box, and save it.

[Insert into Template]
After pushing 'Apply these settings' button from 'Build your own' tool, you can get your custom code.
* There are only two widgets compatible with Blogger Template; 'Floating Tab Menu', 'Popup Widgets'
1) Push 'Select code in <head>' button, and press Command+C (Mac) or Control+C (Windows) to copy the code.
2) Go back to Blogger. Select 'Template' tab, and push 'Edit template' button.
3) Paste the head code right above </head>, and click 'Save template' button.

There are two ways to embed a custom widget into Rapidweaver: Insert iFrameInsert each code

[Insert iFrame]
After pushing "Apply these settings" button from "Build your own" tool, you can get your custom code. Push "Make an iFrame" button, and press Command+C (Mac) or Control+C (Windows) to copy the iframe code. (you must download and upload the iframe into your website then replace "src" to yours) Go back to Rapidweaver, and add a new Snippet. Paste it into the code box and save it. Drag the snippet into somewhere in a page. (For sure, you can directly paste the code in a page without the snippet.)

[Insert code]
After pushing "Apply these settings" button from "Build your own" tool, you can get your custom code.
1) Push "Select code in <head>" button, and press Command+C (Mac) or Control+C (Windows) to copy the code. Go back to Rapidweaver, and insert a new Snippet from Rapidweaver. Paste it into the code box.
2) Push "Select code in <body>" button, and copy & paste it into the snippet code box of Rapidweaver (add right after the head code.) then save it.
3) In Rapidweaver, select the snippet and drag it into somewhere in a page.

After pushing "Apply these settings" button from "Build your own" tool, you can get your custom code. Push "Make an iFrame" button, and press Command+C (Mac) or Control+C (Windows) to copy the iframe code. (you must download and upload the iframe into your website then replace "src" to yours)
1) Go back to Wix HTML Editor. It's strongly recommended to connect the Wix site to your website domain because of SOP (Same Origin Policy).
2) Add a HTML code box from the left menu. (Add > Apps > HTML) Then select "HTML code" mode. Paste the code into the code box.
3) Input each correct "width" and "height" at the bottom, and then click "Update" button.
* If a widget doesn't provide "iFrame code", you can also copy & paste each code in the <head> and <body> to the html code box.

There are two ways to embed a custom widget into a HTML editor: Insert iFrameInsert each code

iWeb
EverWeb
Dreamweaver
Adobe Muse
Wordpress
Blogger
Rapidweaver
Wix.com
Web Editor

If you have a web hosing service with your website domain and want to put photos into your web server, you can upload them via FTP. A photo address would be like "http://example.com/photos/xxx.jpg" (The folder and file name vary depending on yours. You can also get a video / music path from your web server by this way.)

Sync / upload your photos into a public folder (select a folder and share it as "Public on the web") of Google Drive. Open Google Drive Web from another tab of your web browser, and move to the shared folder including your pictures. Drag an image, and Drop it into a "photo path" field in the "Build your own" tool. (You can also get a video / music path from google drive by this way.)

Sync / upload your photos into DropBox. Click "Share link" button, and then push "Get link" button. The link will be copied to your clipboard. Paste it into a "photo path" field in the "Build your own" tool. (You can also get a video / music path from dropbox by this way.)

Sync / upload your photos into Flickr. Click "Share" button, and choose "Grab the HTML/BBCode". Copy only the url in the Red box. (img src="http://.....jpg"). Paste it into a "photo path" field in the "Build your own" tool.

Sync / upload your photos into Google+. Go to "Photo" menu from Google+. Click the right mouse button over the image. When a menu shows up, choose "Copy Image Address / Location / URL". Paste it into a "photo path" field in the "Build your own" tool.

Click the right mouse button over the image. When a menu shows up, choose "Copy Image Address / Location / URL". Paste it into a "photo path" field in the "Build your own" tool.

Insert multimedia from everywhere on Web

Pro Pack respects and follows fundamental principle of web; "Web is open to public". As a result Pro Pack provides a new method to allow users to take full advantage of resources from everywhere on web. All of the open (public) web resources can be added into your custom widget. We are saying the new method is "Two fingers make magic".
Basically a "Build your own" wizard works mostly by pressing Command + C / V (Macintosh) or Control + C / V (Windows, Chrome OS, Android...). To insert a photo / video (mp4,m4v) / music (mp3,m4a), just copy its URL from the address bar of your web browser or pop-up menu. If you are using a cloud service like Google Drive / DropBox / Google+ / Facebook / etc..., you can get & add a picture URL to your custom widget as soon as you take from your smartphone. (* Every widget is supporting open URLs from externals except for Gray scale gallery widget.) Go to purchase

Your web server
Google Drive
DropBox
Flickr
Google+
Facebook / other sites

Save your custom settings

After you have completed to build your custom widget, you may consider to save the current settings (including contents) in order to re-edit in the future. Just make one click to "Save these settings" button. You can reuse the saved settings for the current widget (Load your settings) or different widgets belonging to the same label (Load your contents only). (* Don't forget a key that you have received from the wizard.)

Load your custom settings

You can re-edit your saved custom settings by clicking "Load your settings" button with your unique key. "Re-edit" means you can add a new content or remove existing contents as well as customize its current settings such as styles, and options. This feature will help you get a new code after rebuilding your existing widget as quickly as possible.

Load existing contents from Sharable Widgets

You can fetch the previously saved settings to the corresponding widget as well as even a different widget of the same label with one Click in a Second!
This magical feature will help you save your energy and time by skipping "Insert contents" work. Just save your settings from a widget that you have built, and then try to click "Load your contents only" button.
What is "Same Label"? Please look at Bumper color around "Insert contents" field. You can share your existing contents with those widgets which have the same color.

* Many of the widgets have a color label but some widgets don't have. We will keep trying to make every widget being able to share their contents.
* To check which widget has what color, please go to Tour