Step by step integration

Integration of Hulbee DataCloud to an existing site with built-in search engine is very simple.

To do so you should generate the DataCloud widget HTML code and paste it into your page.

For example let us see how the Hulbee DataCloud is integrated in the Wordpress (well-known free blog engine).

• Let us assume next:

  • You have your own website and you are the administrator of this site.
  • Your site is located on a public web server and is available by the domain name.
  • The domain name of your site is mypersonalblog.com

  

  Figure 1. Site on mypersonalblog.com.

• In order to get the HTML code for the Hulbee DataCloud, you should be registered on the datacloud.hulbee.com portal. To get registered you should go to the registration page (fig. 3). To get on the registration page from home page click on the Link to registration page (fig. 2, marker 1).

  

  1 – Link to registration page.
  Figure 2. Hulbee DataCloud home page.

• To register on DataCloud site you should fill all required fields (fig. 3, marker 1) and click on Register button (fig. 3, marker 2). Immediately after that the verification message will be sent to you.

  

  1 – Registration fields; 2 – Register button.
  Figure 3. Registering on DataCloud site.

• To complete the registration confirm your e-mail address using the instructions in the verification message. If you don’t receive the verification message probably there was error in E-mail field on previous step (fig. 3, marker 1). In this case try to register again (with another login and password).

• Once registered, you should authorize on the site and go to the My clouds section. To get authorized you should go to the authorization page (fig. 5). To get on the authorization page from home page click on the Link to authorization page (fig. 4, marker 1).

  

  1 – Link to authorization page.
  Figure 4. Hulbee DataCloud home page.

• To get authorized on DataCloud site you should fill Login and Password boxes (fig. 5, markers 1,2) and click on Submit button (fig. 5, marker 3).

  

  1 – Login box; 2 – Password box; 3 – Log in button.
  Figure 5. Authorizing on DataCloud site.

• To get to the My clouds section My clouds link (fig. 6, marker 1) could be used.

  

  1 – My clouds link; 2 – New DataCloud button; 3 - “Hulbee Map” test DataCloud.
  Figure 6. My clouds page.

• There are already “Hulbee Map” DataCloud (fig. 6, marker 3) in the Clouds list, it is placed there for testing purposes. To create new DataCloud the Cloud wizard should be used.

  The Cloud wizard will help you to build the Hulbee DataCloud for your site in 3 easy steps:

  • Click the New DataCloud button (fig. 6, marker 2) to run the Cloud wizard;
  • Step1
  • Carefully fill all required fields (fig. 7, marker 1). To know more about this fields or other options see Hulbee DataCloud documentation;
  • Click on the Next button (fig. 7, marker 2);
  • Step2
  • On this step DataCloud design can be changed. Select desired or keep the default options and click on the Next button (fig. 8, marker 1);
  • Step3
  • On this step DataCloud content can be changed. Select desired or keep the default options and click on the Finish button (fig. 9, marker 1).

  

  1 – Required fields; 2 – Next button.
  Figure 7. Cloud wizard window. Step1.

  

  1 – Next button.
  Figure 8. Cloud wizard window. Step2.

  

  1 – Finish button.
  Figure 9. Cloud wizard window. Step3.

• In a few seconds new DataCloud will be created and added to Clouds list (fig. 10, marker 1).

  You can preview and test the DataCloud or edit DataCloud settings. To preview the DataCloud (fully functional DataCloud with query string and search results components for test purposes) select it in the Clouds list (fig. 10, marker 1) and click Preview tab (fig. 10, marker 2). You will be able to test how DataCloud will work on your site. To edit the DataCloud design and content click Edit tab (fig. 10, marker 3).

  

  1 – MyPersonalBlogCloud DataCloud; 2 – Preview tab; 3 – Edit tab; 4 – Get Code tab.
  Figure 10. My sites page.

• To insert the Hulbee DataCloud into your site, you should generate DataCloud widget HTML code. To do this select desired cloud from the Clouds list (fig. 10, marker 1) and click on Get code tab (fig. 10, marker 4).
• On Get code tab (fig. 11) fill the Query pattern field (fig. 11, marker 1) carefully. It is important to input correct Query pattern for DataCloud to interact with your site search engine properly. The Query pattern is the URL that is given by your site search engine when the search query is TEST. To receive the Query pattern for your site, use this advice: input TEST word as a query in your site search string and run a search. By doing so, you make your browser jump to a new URL. Copy this URL to the clipboard - that will be the Query pattern for your site.
• Click on Get code button (fig. 11, marker 2). DataCloud HTML code will appear in Integration code box (fig. 11, marker 3).
• Copy the code (fig. 11, marker 3) to the clipboard.

  

  1 – Query pattern field; 2 - Get code button; 3 - Integration code box.
  Figure 11. Get code tab.

• Now you should insert received HTML code into your site pages. Usually this is done by editing template pages or by adding the widget.

  Wordpress blog engine has option allowing to add a new widget. Previously received DataCloud HTML code should be used as Widget Code for Wordpress.

  It is important to save changes for widget to become available for site users. To Integrate DataCloud HTML code to Wordpress blog you should follow next steps:

  • Click on Appearance tab (fig. 12, marker 1);
  • Click Widgets item (fig. 12, marker 2);
  • Drag and drop Text widget (fig. 12, marker 3) from Available Widgets panel to a Sidebar panel (fig. 12, marker 4);
  • Fill Title field (fig. 12, marker 5);
  • Paste DataCloud HTML code from the Clipboard to Widget text box (fig. 12, marker 6);
  • Click Save button (fig. 12, marker 7);

  

  1 – Appearance tab; 2 – Widgets item; 3 – Text widget; 4 – Sidebar panel; 5 – Title field; 6 – Widget text box; 7 – Save button.
  Figure 12. Integrating DataCloud HTML code to CMS as widget.

  

  Figure 13. Integrated DataCloud widget.