Spike: How to Embed Volvo Trucks Configurator to website

[DanielaPedrochevd]

Description Investigate the best approach to achieve #199 and share the results with the team in this ticket.

During the refinement of #199 we discussed 2 possibilities: 1- Create a new Embed Spa block where the author adds the .js and .css files as an HTML route. 2- Create an iframe.

[DanielaPedrochevd]

related to #199

[TomaszDziezykNetcentric]

SPIKE RESULTS:

Preview of the app to embed: https://199-tuck-configurator--vg-volvotrucks-us-rd--netcentric.hlx.page/scripts/v2-embed/index.html

---

Solution 1: App directly embedded on the website. Preview: https://199-tuck-configurator--vg-volvotrucks-us-rd--netcentric.hlx.page/drafts/tdziezyk/v2/embed-spike/direct-embed

Pros:

• Possible to add extra actions like hiding the header when use scroll to external app

Const:

• The external app has CSS styles that override some of our app styles. For instance, the styles affect the header on mobile

  

• Some of our app CSS set styles that are not set in the external app. For instance the disabled arrow button

  

• Testing the CSS collisions will be time-consuming. We can't predict what part of the apps can be affected by the other, so we should retest our app header and the whole external app.

• The app uses CSS rules that set fixed positions. As a result, some app components are displayed in the wrong places. Example: The top menu is not displayed in the right place. It is under the header.

How it should be displayed:

How it is displayed:

---

Solution 2: App inside iframe. Preview: https://199-tuck-configurator--vg-volvotrucks-us-rd--netcentric.hlx.page/drafts/tdziezyk/v2/embed-spike/embed-iframe

Pros:

• The external app is separated from our app.
• No CSS collisions
• Testing the external app can be limited to interaction between the external app and our app. No need to test all of the external app features.

Const:

• There is no possibility to overlap the header with the external app component. The external app modal background will not overlap the header. (It is not a problem if we want to display the external app in the whole viewport)

---

Solution 3: App added as shadow DOM element Preview: NOT AVAILABLE

The app is not designed in the way to add it as the shadow DOM element. Explanation: The external app is using the document.querySelector object to render the app root which should be inside the shadow root, but shadow root children aren't available by document.querySelector.

---

Conclusion: Solution 1 would require some changes from the external app team. It is hard to predict what must be fixed without in-depth testing of the external app embedded in our app. Solution 2 is the best option from the solution complexity (developing and testing). Solution 3 is not possible to implement for now. The current external app structure would require changes.

---

External app problems found during spike:

• images aren't loading - 403 code
• the app crashes when the user clicks the open details button and close the modal with X button

[cogniSyb]

@TomaszDziezykNetcentric and I had a meeting with Rapid Images. The iframe solution is preferred, though we need to figure out how to deal with analytics. Probably we could simply add the tag manager script to their code.

The 403 error is because they’re working with whitelisting of IP addresses to protect the assets before NDA is lifted.