In second part, we have covered, how can we configure non-sitecore site into federated experience manager and make it ready for collecting analytics and interaction data from non-sitecore sites. In the third part of this article, we will cover how we can configure and show sitecore content in non-sitecore site.

Part 1 – Configuring federated experience manager in Sitecore
Part 2 – Setting up non-sitecore site and add it into FXM
Part 3 – Displaying sitecore content into non-sitecore external site.
Part 4 – Personalize Content and Trigger Goal/Event from external site.

Open in Experience Editor

Once you configured the non-sitecore website into federated experience manager successfully, the Experience Editor must be launched from within the FXM using the “Open in Experience Editor” button.

Now your non-sitecore website should be visible in the page. There are several unique ribbon actions in the FXM Experience Editor you should be aware of. Here is the list of new buttons:

Assign Marketing Attribute – By clicking this button you’ll see a view of the page with all the FXM-aware elements highlighted, such as click actions and placeholders. It just helps you see what you’ve already configured.
Manage FXM Functions – This pop-up provides a way to manage configurations for all the elements you’ve added to the page, such as placeholders or actions
Add Page Filter – A page filter is a way to add personas, goals, or events at a page-level and/or all of a page’s descendants.
Capture Click Action – You can register a click action on any element on the page you want Sitecore analytics to be notified of when clicked.
Add Placeholder – You can add placeholders to the page and then add Sitecore content to those placeholders.

Next, we would try to display sitecore content into this html website and we would use “Add Placeholder” feature of the federated experience manager.

When you click on “Add Placeholder” button, all other buttons would get disabled. Now you are ready to select the place on non-sitecore site page, where you wanted to put new placeholder. This placeholder would be used to show the sitecore content.
Click anywhere on the page, you will get some options (Add before, Replace and Add after) to add placeholder on a particular location.

In our case, we will add new placeholder to replace the selected control with sitecore Content. For that, we would click on “Replace” button.

You need to provide the placeholder name, in our case, it is “sitecore-content” and we need to select the parent for this placeholder. Now, click on save button below.

As soon as you click on save button, you will get confirmation message at top and one option will be populated to add new controls into this placeholder. Clicking on this “Add here” button, will open a dialog as below.

Select the “Sample Rendering” from the sample folder and click on “Select” button from the bottom of the screen. Make sure that, the check box “Open the Properties dialog box immediately” must be selected to set its data source.

Now you can see that, one unique placeholder id has been assigned to this placeholder. You can click on “Browse” button to select its data source item (the item that contains the actual text what you wanted to show.)
As soon as you click on “Ok” button from above screen, you should get a preview of that sitecore content into your placeholder in non-sitecore page. You are not seeing that content in your page, there might be a possibilities of wrong selection of Rendering or wrong selection of data source mentioned in previous paragraph.
You can create your own rendering and data source item as per your business need and select those items for this placeholder.

Don’t forget to save your current configuration from top left “Save” icon. After save, again click on “Add Placeholder” button from the toolbar to enable all other buttons for further configuration. Finally we need to publish this configuration by hitting “Publish” button from the toolbar.
Browse the non-sitecore now. Voila!!! Here is the sitecore content, you are looking for, in non-sitecore site. Cheers.

References

https://doc.sitecore.net/sitecore_experience_platform/digital_marketing/federated_experience_manager/configuring/the_requirements_and_limitations_of_fxm?roles=admin
 
https://doc.sitecore.net/sitecore_experience_platform/digital_marketing/federated_experience_manager/using_fxm/add_an_external_website_in_fxm
 
http://www.techguilds.com/blog/2017/03/how-to-track-clicks-with-sitecore-fxm
 
http://www.sitecore.net/en/products/sitecore-experience-platform/cross-channel-delivery/fxm