Embed Oracle Visual Builder Applications in an Oracle Content Management Site Page

You can embed a Visual Builder Cloud Service (VBCS) visual app or VBCS page in an Oracle Content Management site page.

Embed a VBCS Visual App in an Oracle Content Management Page

To embed a visual app in a site page, you need to create the app in VBCS and then add the app to the page.

Create a Visual App in VBCS

Connect to a VBCS Server.

For example: https://vbcs-server/ic/builder (for a Universal Credits subscription with Oracle Content Management) or https://vbcs-server (for a non-metered subscription) .

If you have a Universal Credits subscription, you must include ic/builder in your Service URL.
Allow Cross-Origin Resource Sharing (CORS):
1. From the VBCS menu, choose Settings and then Allowed Origins.
2. Click New Origin and enter the URL of your Oracle Content Management server for Origin Address.
Create a new Visual App in VBCS.
Create a web application.
1. Click Web Applications in the navigation menu on the left.
2. Enter a name for the web app, and then click Create.
Allow the web app to be embedded in an iframe:
1. Select the web app in the navigator.
2. Choose Settings (the cog icon), and then click the Security tab. Choose Allow embedding in any application domain.
1. Right-click the Resources node in the navigator.
2. Locate the Sites SDK (import the sites.js or sites.min.js file).
  The Sites SDK is also available for download from the Oracle Content Management server:
```
http://{server}/_sitesclouddelivery/renderer/app/sdk/js/sites.min.js
```
3. Click Import. This imports the JS file into the resources directory.
Reference the Sites SDK in the page:
1. With the web app selected, choose the HTML tab in Site Builder.
  
  Description of the illustration vbcs_html_tab.png
2. Add the following line below the <link> tag:
```
<script type="text/javascript" src="resources/sites.min.js"></script>
```
Add a page URL parameter called id. Oracle Content Management will use this parameter to pass the ID of the component.
1. Select the page in the web app.
  
  Description of the illustration vbcs_web_app_page.png
2. Click the Variables tab.
3. Add a variable called id, and click Create.
4. In the panel on the right, mark the new variable as a URL input parameter.
Add code to automatically set the iframe height when the web app renders:
1. Click the JS tab on the on the left of the page.
  
  Description of the illustration vbcs_js_tab.png
2. Add the following code above the return statement. This will resize the height of the Oracle Content Management component when the app renders.
```
setTimeout(function() {
  SitesSDK.setProperty("height", null);
}, 500);
```
Stage and Publish the VBCS app. The app must be live for the Oracle Content Management site to use it.

Add the VBCS Visual App to an Oracle Content Management Site Page

In Oracle Content Management, configure a VBCS connection:
1. On the Administration menu, choose Integrations and then Applications.
2. Enable the Visual Builder Cloud Service Integration.
  
  Description of the illustration vbcs_integrations_2.png
3. Enter the URL of your Oracle Content Management instance, and then click Save.
Create a new VBCS component:
1. Choose Developer and then Components.
2. Choose Create and then Create Visual Builder Component.
3. Publish the VBCS app you created, copy the URL of the app, and then paste it into the form. Do the same for the web application you created.
Add the VBCS component to a site page:
1. Edit a new or existing site.
2. In Site Builder, choose Components and then Custom.
  
  Description of the illustration vbcs_components1.png
3. Drag the VBCS component onto the site page.

Embed a VBCS Page in a Site Page

To embed a VBCS page in a site page, you need to create an app in VBCS and then add the app to the site page.

Create an App in VBCS

Connect to a VBCS Server.

For example: https://vbcs-server/ic/builder (for a Universal Credits subscription with Oracle Content Management) or https://vbcs-server (for a non-metered subscription) .

Note:
If you have a Universal Credits subscription, you must include ic/builder in your Service URL.
Allow Cross-Origin Resource Sharing (CORS):
1. Choose Administer Visual Builder, then Global Settings, and then Allowed Origins.
2. Click New Origin, and enter the URL of your Oracle Content Use Oracle Content Management Components in Oracle Visual Builder Applications server for Origin Address.
Create a new app in VBCS.
Allow the new app to be embedded.
1. Choose Application Settings, then Security, and then Embedding.
2. Select Allow embedding in any domain.
Use Data Designer and Page Designer to build your app.
Add a custom component to the bottom of your page.

Description of the illustration vbcs_custom.png
Select the Custom Component. Enter the following in the Template section:
```
<div data-bind="html: script"></div>
```

Enter the following code in the Model section, substituting your own Oracle Content Management server.

define([], function () {

	'use strict';

	/**
	 * Inject the SitesSDK and set the Component Height.
	 */
	var CustomComponentViewModel = function (params, componentInfo) {
		this.script = ko.observable(
         '<script type="text/javascript">\n'	
       + '(function(d, s, id) {\n'
			+ '  var js, fjs = d.getElementsByTagName(s)[0];\n'
			+ '  if (d.getElementById(id))\n'
			+ '    return;\n'
			+ '  js = d.createElement(s);\n'
			+ '  js.id = id;\n'
			+ '  js.src = "https://oracle-content-management-server
			+ '  fjs.parentNode.insertBefore(js, fjs);\n'
			+ ' }(document, "script", "sites-sdk"));\n'
			+ ' setTimeout(function() {\n'
			+ '   SitesSDK.setProperty("height", null);\n'
			+ ' }, 500);\n'
       + '</script>');
   };

	return CustomComponentViewModel;
});

Enter the following for Application Style. This will hide some of the unwanted "chrome" around the component when embedded in an SCS page.

/* remove some side padding */
div#abcs-app-content > div {
  max-width: none;
}

/* allow SitesSDK.setProperty("height") to work */
html, body, body.abcs-layout-nonav {
  height: auto;
}

Stage and publish the VBCS app. The app must be live for Oracle Content Management sites to use it.

Add the VBCS App to a CECS Site Page

In Oracle Content Management, configure a VBCS Connection:
1. Choose Administration, Integrations, and then Oracle Integrations.
2. Select Enable for Visual Builder Cloud Service Integration.
3. Enter the Oracle Content Management URL (from Step 1 under Create an App in VBCS), and then click Save.
  
  Description of the illustration vbcs_admin.png
Create a new VBCS Component:
1. Choose Developer and then Components,
2. Choose Create and then Create Visual Builder Component.
  
  Description of the illustration vbcs_components.png
3. In the drop-down list, choose the VBCS App (created earlier in step 3 under Create an App in VBCS).
  
  Description of the illustration vbcs_create_component2.png
Add the VBCS component to a site page.
1. Edit a new or existing site .
2. In Site Builder, choose Add and then Custom.
  
  Description of the illustration vbcs_add_component.png
3. Drag the VBCS component onto the page.
  
  Description of the illustration vbcs_drag_component.png