3

Could you let me know please if there is a possibility to embed a Sitecore JSS app/component in an existing non-Sitecore website?

To be more explicit our client has multiple external non-Sitecore websites and a main presentation website built in Sitecore 9. There are some components that he wants to use from Sitecore website on the non-Sitecore websites (let's say a carousel that would be displayed on non-Sitecore external websites). The idea is to use Sitecore components that will be embedded in the external websites and that will allow personalization feature.

First thing that came to my mind in order to build this is FXM, but due to different limitations we cannot use it.

I've gone through the documentation of Sitecore JSS that seems to cover pretty well the headless content, however it's still not clear for me if I can build some components as a JSS apps that uses the content from Sitecore and embed them into non-Sitecore websites

Is there a way to do this with Sitecore JSS? Thanks

Improve this question
2
  • Would the reasons that rule out FXM not also rule out JSS?
    – Mark Cassidy ♦
    Commented Nov 12, 2018 at 14:13
  • The reason it rules out FXM is the requireJS use on the external apps. I don't think it will rule our the JSS use.
    – damary
    Commented Nov 12, 2018 at 14:19

2 Answers 2

Reset to default
1

For sites that are not managed or running on a Sitecore instance, you could use JSS in either:

Which mode you choose would depend on how the non-Sitecore site is running. For instance, for SSR mode you would need a server running node.js. For API-only mode, your JSS app is "simply" making requests back to a Sitecore server for data.

One thing to keep in mind is that only your JSS app will be editable / component-manageable via Sitecore Experience Editor. You will not be able to edit or manage the app within the context of the non-Sitecore site.

And one final note, you may not even need a full-fledged JSS app. If the non-Sitecore site is capable of making fetch/XHR requests, you can retrieve data directly from Layout Service (which will deliver personalized content): http://jss.sitecore.net/docs/fundamentals/services/layout-service, and then use that data as needed in your non-Sitecore site. That said, if you're using React, Vue, or Angular on the non-Sitecore site, you'll want to consider using the corresponding @sitecore-jss/sitecore-jss-XXXX npm package for those frameworks to make the development process smoother.

Improve this answer
1
  • Thanks Adam really helpful. we went for retrieving the data directly from Layout Service
    – damary
    Commented Nov 19, 2018 at 9:30
2

Client-side embedding (docs) is a technique that basically embeds a JSS app for client-side rendering within a Sitecore MVC rendering.

This same technique (the resulting HTML for the Sitecore MVC rendering) should be fine to browser-side render the JSS app outside of Sitecore as well. Just make sure the API key allows the other app as a CORS origin.

Basically copy the app's index.html scripts and app root element into the other site's HTML :)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.