A really great tool provided by Sitecore for managing non-Sitecore or external website’s content through Sitecore.
Yes!!! non-Sitecore or external site.
Consider we have a site like below screen. Its a default MVC site created in Visual studio.
Here we will see how to manage above highlighted section (in RED color) through Sitecore FXM. Consider this section is in div tag and its id is “testbanner”.
Before starting this, create your rendering component in sitecore that you want to use in above highlighted section. I have created a View rendering named as “FXMComponent” and its result will be as below.
So we will be replacing External site’s highlighted screen in 1st screen with above screen.
Now at first, we need to add external site to Sitecore FXM. follow the below steps.
- Login into Sitecore instance, you will get option of Federated Experience Manager (FXM) as highlighted below:
- Click on FXM button to add external website. And click on “Add external website”.
- Specify the parameters like Name = “<Name>” and Website domain=”<External Site Domain name>”. In this example, my external site is “testsite”.
Also Copy the “Generated Script” value which will be pasted in your external website’s main layout means this script should be on all the pages which you want to manage through Sitecore. so if you need to manage content of may be 2 or 3 pages only then add that script to those pages only else to your main layout to add this script on all the pages.
- Now save it and it will validate the script is added to the site or not. once its done below screen will be visible.
Here you will get 4 buttons,
1) Edit: to edit the registered external site
2) Open in Experience Editor: To manage content of the external site
3) Delete: Remove the external site from sitecore.
4) Publish: Publish the changed contents for showing it on external site.
- Click on “Open in Experience Editor” and it will open the External site in Sitecore editor mode to add sitecore components.
- Click on “Add Placeholder” button will give option to add placeholder on our required div or section of the external site. So Sitecore’s component will render on that place of external site. We can add new rendering or replace the existing div or section of the external site.
Here i am replacing the div and placing my sitecore component. Click on “Replace” will show below popup to add placeholder.
Add the name and select parent as “FXM test Site” which i have given in my instance. Once place holder added, will show below screen where you can add Sitecore’s component.
- So Click on “Add here” button will popup a component section. Select our sitecore component “FXMComponent” and click on OK.
And now you can see the content of the new component.
Save everything and publish as well. All done now
- Open our external to new browser and see the result.
In this way you can see the content from Sitecore in external site. There are many options available with FXM which are highlighted in below screen.
With FXM, as you are adding component from Sitecore, it will give all the facilities like Personalization, AB testing, Analytics, etc….
Note: There was an error from Sitecore that if in external site there are multiple DIV and they do not have IDs or if they have common ID then Sitecore will render component in all the places where same IDs or same DIV structure is observed. This issue was raised in Sitecore 8.0 Initial release Not sure that its fixed yet or not 🙂
Hope this article will give an understanding about FXM facility of Sitecore.
Enjoy !!! Happy FXM 🙂