Operate > IBM Management Center for WebSphere Commerce > Marketing tool > Work with remote widgets and feeds for e-Marketing Spots
Create an e-Marketing Spot remote widget
You can create a Flash widget to make a portable version of an e-Marketing Spot. You and the customers can embed the e-Marketing Spot remote widget on Web sites external to WebSphere Commerce. On the external sites, the widget displays the Web activities or default content scheduled for the e-Marketing Spot.
This procedure explains how to create an e-Marketing Spot remote widget by connecting through Management Center to the KickApps App Studio on the Internet. Another option is to use a widget service provider other than KickApps, or you can create and host the own widget. In either case, the widget must get its content from the Atom feed coming from the target e-Marketing Spot. This way, the widget content on the remote sites is controlled by the Web activities or default content scheduled for the e-Marketing Spot.
Before you begin
- Make sure the WebSphere Commerce server you plan to use is set up according to the Remote widget setup and implementation checklists. If the server is not accessible from the Internet, you can still do the procedure in this topic; however:
- You cannot view or edit the feed data in the widget template in KickApps.
- The feed data will not display in test widgets you embed on external Web pages.
- If the e-Marketing Spot that to create a remote widget for does not exist in the Management Center Marketing tool, create it. For general instructions, see Create an e-Marketing Spot.
- Make sure that the e-Marketing Spot has either an active Web activity running or default content specified. If the e-Marketing Spot is empty, the feed will not contain any data.
- To test the e-Marketing Spot remote widget, you need access to an external Web page onto which you can embed the widget. This can be a social networking page, or some other Web page to which you can add the widget embed code.
You can create remote widgets for customer-facing stores, including extended sites. You cannot create remote widgets for asset stores.
Procedure
- Open the Marketing tool.
- Open the e-Marketing Spot that to create a widget for:
- From the explorer view, click E-Marketing Spots. The E-Marketing Spots - List page opens.
- Right-click the e-Marketing Spot; then click Open.
- Click the Has a widget check box to indicate that this e-Marketing Spot has a remote widget. This check box is for informational purposes only.
- Save the e-Marketing Spot. If you have unsaved changes to the e-Marketing Spot name, the Get Widget button in the next step will be disabled.
- Click Get Widget to connect to the KickApps App Studio on the Internet. The KickApps App Studio page displays.
- Choose one of the following options:
- To create a remote widget using one of the WebSphere Commerce widget templates, click New e-marketing spot widget > From template. Choose this option if you are new to remote widgets and to KickApps App Studio. Then proceed to the next step.
- To create a remote widget from scratch, click New e-marketing spot widget > From scratch.
Choose this option only if you are already familiar with KickApps. You can skip the remaining steps in this procedure and create the widget in KickApps using a Custom List component to display the feed in the widget. You can copy the e-Marketing Spot Feed URL that displays in Management Center underneath the Get Widget button, and then specify the URL for the Custom List component in KickApps App Studio.
- Click the WebSphere Commerce Templates tab.
- Double-click one of the two green templates. These two templates display e-Marketing Spot feed data. While the templates are specifically designed to display a list of catalog entries, you can modify the template to display other e-Marketing Spot feed data, such as advertisements or featured categories. The two templates are identical, except that one is sidebar-style and the other is banner-style.
If KickApps can access the server from the Internet, the data from the e-Marketing Spot feed displays in the template you chose; otherwise the template is empty.
- Use the KickApps App Studio to modify the template to suit the widget. Click on different layers in the widget template to display related KickApps editing panels. For more information about using the KickApps App Studio, click on the blue help icons on the KickApps pages.
Here are some tips for using the WebSphere Commerce widget templates:
- You can add the own static text and images by dragging new components into the widget. For example, you can delete images from the template and replace them with more suitable images you have uploaded to KickApps. Keep in mind that text and images that do not come from the e-Marketing Spot feed will not change dynamically when you schedule a different Web activity or default content for the e-Marketing Spot.
These additional tips apply only if KickApps can access the server from the Internet, making the feed data available for editing:
- To change or rearrange the feed data in the template, work with the feed_list layer. The templates use a Custom List component to display the e-Marketing Spot feed. This component is represented in the template as the feed_list layer.
Note that the data from the feed is one layer deeper than the feed_list layer. To see and work with the individual components from the feed, such as the thumbnail image and price, double-click the feed_list layer.
- The two templates display only a select set of data from an e-Marketing Spot feed: product image, product name, and price. Each is represented by a component (layer) within the feed_list layer. Your e-Marketing Spot feed might contain additional images and text that you can display in the widget, such as the product long description, even though the template is not displaying that data.
To include additional feed data in the widget:
- Within the feed_list layer, drag in a new text or image component.
- Use the KickApps Content panel to select the feed element to display in the component.
- You might find that text and images from the e-Marketing Spot that you expected to display in the widget are not showing up in the template, and you cannot select them from feed. This means that a store developer must customize the feed formatting JSP files for the e-Marketing Spot so that the additional data is included in the feed. Then you can try creating the widget again.
- Save the widget in KickApps App Studio.
- Preview the widget in KickApps App Studio.
- Optional: Create a second e-Marketing Spot widget using the other Deals Of The Week template. This way, if you plan to let customers share this widget from the storefront, they can choose the layout that fits their personal Web page. The "Share this widget" page for Madisons supports layout options for Sidebar and Banner. These layout options are viewable to customers only if you have two versions of the widget.
- Test the widget on a Web page external to WebSphere Commerce using the publishing options offered in KickApps App Studio. For example, you can publish the widget directly to certain social networks. Alternatively, you can copy the embed code for the widget and add it to an external Web page.
Note that if KickApps cannot access the test server from the Internet, the widgets embedded on external Web pages will not display feed data.
- Close KickApps App Studio.
What to do next
If you want customers to be able to share this remote widget from the storefront, a store developer must add a Share link to the e-Marketing Spot by changing the store page JSP file. The Share link must point to the widgets you created by their widget ID. You can use this Share link to test the widget from the customer's perspective. See Add a Share link for an e-Marketing Spot remote widget.
Related concepts
Remote widgets for e-Marketing Spots
Comparison of e-Marketing Spot remote widgets and feeds
Content of e-Marketing Spot remote widgets and feeds
Personalization in e-Marketing Spot remote widgets and feeds
Related tasks
Configure WebSphere Commerce to communicate with KickApps for remote widgets