This repository contains a set of sample site components to showcase how to integrate Watson Campaign Automation (WCA) forms into the Watson Content Hub Sites feature. The samples include two techniques: iframe inclusion, and embedding a WCA form into a native WCH component.
Table of contents
- Table of Contents
- Sample screenshots
- Install and deploy the sample
- Add an iframe form to a page
- Add an embedded form to a page
- Samples go live
- Advanced customization of the WCA form component
This sample repository provides two example plugin components for your WCH site. It includes iframe and embedded WCA form components. With the iframe component, you can display any WCA form in an iframe window. With the embedded form component, you can build your WCA forms using WCH content items. To enable these 2 components, just install the packages from this repository by following the steps below.
See the end result for each of the two samples:
WCA iframe form component
WCA embed form component
- A WCH tenant in Trial or Standard Tier
- wch-site-application source with build date of June 7th, 2018 or later
- wchtools-cli v2.0.3 or above
- Node.js v6.11.1 or above
Install and deploy the sample
Configure your wchtools
- Open the "Hub information" for your tenant and copy the API URL.
wchtools initin your command line. Enter your username and API URL to configure wchtools.
Clone and install the sample content-artifacts and site-application-files
- Change the command line working directory to the wch-site-application root folder. If you haven't already done so, perform all of the required installation steps for the site application repository.
- Using the git URL to the sample-wca-form-components repository, run this command to copy the needed sample and update the layout settings for the new components:
npm run install-layouts-from-git https://github.com/ibm-wch/sample-wca-form-components.git
Build and deploy your components
- From within the wch-site-application directory run:
npm run buildto compile the project. Make sure there is no error during the build process.
npm run deployto your WCH tenant. Note: Use
@ibm-wch-sdk/ngin the WCA form component (src/app/components/wca-/.ts), element (src/app/elements/wca-/wcaType.ts) and layout (src/app/layouts/wca-/wcaLayout.ts) imports, if you are using Angular 5.
Add an iframe form to a page
- Copy the URL to your form from WCA:
- Create a new page or edit an existing one.
- Create and configure a new WCA iframe form on the page.
httpsso the cross-origin iframe can be served from within your WCH site:
- Publish your changes to view the form on your live site:
Add an embedded form to a page
Create a new page or edit an existing one.
Create a new WCA embed form content item on the page. Important: Use a fully qualified
httplink for the "Action URL", so WCA will accept the request:
- Optional: If you want the form to display the results from WCA in a new browser tab upon form submission, turn on the "Open results tab" toggle:
Leaving the toggle off displays the results in the current browser window. Due to cross-site security limitations in WCA, displaying this results page (either in the current or a new tab) cannot be prevented altogether. In order to make this flow more user-friendly, a best practice would be to include a link back to WCH from the WCA results page:
To create your WCA form elements, you will need to inspect your WCA form in a browser. This is the same URL used for the form's Action URL (e.g. http://www.sample.net/org/sports/sign-up).
Inspect the form using your developer tools to get the
types of the form input fields, and options. Here is an example form, highlighting the information to be gathered:
- For each form element, compose a new WCA form element in your WCA embed form content item. See these examples of each form type:
<input name="COLUMN22" type="text" label="First Name">
<input name="EMAIL" type="email" label="Email" placeholder="firstname.lastname@example.org" required>
Note: The placeholder field can be used for any text-based input.
radio, add an option in the WCA form element for each radio button
valuein the group:
<table> <tbody> <tr> <td> <input name="COLUMN92" type="radio" label="New Player" value="Yes" checked=""> </td> <td>Yes</td> <td> <input name="COLUMN92" type="radio" label="New Player" value="No"> </td> <td>No</td> </tr> </tbody> </table>
Note: To make one of your radio buttons selected by default, set its
value in the WCA form element. For example, here the radio button with the "Yes"
checked, so "Yes" should be the
value for the radio button group:
select, add an option for each
<select name="COLUMN94" label="Age Range"> <option>Select one</option> <option value="18-34">18-34</option> <option value="35-50">35-50</option> <option value="51-65">51-65</option> <option value="66-80">66-80</option> <option value="81+">81+</option> </select>
checkbox, add an option for each
valuein the group of checkboxes:
<table> <tbody> <tr> <td> <input name="COLUMN111" type="checkbox" label="Interests" value="Team Sports"> <label>Team Sports</label> </td> </tr> <tr> <td> <input name="COLUMN111" type="checkbox" label="Interests" value="Roller Sports"> <label>Roller Sports</label> </td> </tr> <tr> <td> <input name="COLUMN111" type="checkbox" label="Interests" value="Fishing & Hunting"> <label>Fishing & Hunting</label> </td> </tr> <tr> <td> <input name="COLUMN111" type="checkbox" label="Interests" value="Games & Toys"> <label>Games & Toys</label> </td> </tr> <tr> <td> <input name="COLUMN111" type="checkbox" label="Interests" value="Golf & Racket Sports"> <label>Golf & Racket Sports</label> </td> </tr> </tbody> </table>
Note: The required field can be used for all input types except checkbox groups.
- Publish your changes to view the form on your live site:
Samples go live
- Ensure your new pages and content items are published.
- Open the "Hub information" for your tenant.
- View your published site by clicking "Live site".
Advanced customization of the WCA form component
If you would like to add additional features or updated styling to your WCA form:
- Open src/app/layouts/wca-embed-form in the wch-site-application directory.
- Edit the html, scss and ts files.
- Use the development server, if desired.
- When you're done editing, run
npm run build-deployfrom within the wch-site-application directory.
See the included license file License.