How to embed Confluence page in website with confluence styles
Asked by Mandy Wells-Lakeland:

Hi Guys,

I need to embed some of our Confluence pages into our website. I'm able to retrieve the HTML content, but is there any way to preserve the styles as well?

I want to display them exactly as they appear on the Confluence page.

I've tried numerous API calls, and the closest one I found still doesn't match the styling of the Confluence page.

```
params = {
    'status': 'any',
    'expand': 'body.export_view.webresource.superbatch.tags.all,body.export_view.webresource.tags.all,body.storage',
}
```

[https://XXX.atlassian.net/wiki/rest/api/content/XXX?params=params](https://xxx.atlassian.net/wiki/rest/api/content/XXX?expand=body.styled_view)  

Thank you!


Answers:
author: Mandy Wells-Lakeland
body: Hi [@Andrii Maliuta](/t5/user/viewprofilepage/user-id/484201)

Thank you for your advice. I tried with \`\`\`body.styled_view\`\`\`, but many features such as "expand (accordion)" and info panels wouldn't work on the webpage. The table styling also does not match the Confluence style.

Here is the html content with style returned from \`\`\`body.styled_view\`\`\` - <https://drive.google.com/file/d/1Vvhjvq96IPmfAF4JRGtpzCmD7c2ijXfD/view?usp=sharing>

Below is the screenshot of the Confluence test page embedded on the website;![Screenshot 2024-04-20 at 01.55.33.png](https://community.atlassian.com/t5/image/serverpage/image-id/319572iBF4F8EE6D9F28B49/image-size/large?v=v2&px=999 "Screenshot 2024-04-20 at 01.55.33.png")  

Below is the screenshot of the test page from confluence;

![Screenshot 2024-04-20 at 01.55.19.png](https://community.atlassian.com/t5/image/serverpage/image-id/319573i26D3B9DD0C58F1F4/image-size/large?v=v2&px=999 "Screenshot 2024-04-20 at 01.55.19.png")

comments: author: Andrii Maliuta
body: Hello [@Mandy Wells-Lakeland](/t5/user/viewprofilepage/user-id/5479646) ,

I suppose that you need all CSS and JS resources necessary for AUI (<https://aui.atlassian.com/aui/latest/docs/getting-started.html>) to work:

1. jquery
2. sinon
3. aui.js

E.g.:  

```
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@atlassian/aui@8.6/dist/aui/aui-prototyping.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.15.4/sinon.js"></script>
<script src="https://unpkg.com/@atlassian/aui@8.6/dist/aui/aui-prototyping.js"></script>
```

You can check the <https://aui.atlassian.com/aui/latest/docs/getting-started.html> docs to see how to get started.

And also there is newer React-based libs Atlaskit (<https://atlaskit.atlassian.com/>) from Atlassian that can be used to have design as in Atlassian products. You can refer to <https://atlaskit.atlassian.com/> to see how to install the components.


author: Mandy Wells-Lakeland
body: Thanks [@Andrii Maliuta](/t5/user/viewprofilepage/user-id/484201) I've come very close to replicating the Confluence style on my website thanks to your feedback. The expand/accordion component is now working. However, there are still a few components, such as "Layouts" from Confluence pages, that aren't quite working as expected, but I can style them manually. Here's my test page again. Overall, I'm quite pleased with the 90% match achieved. Since I'm using Python/Django, React-based libs Atlaskit won't work for me. Thanks again for your help.   

<br />

![Screenshot 2024-04-22 at 01.14.44.png](https://community.atlassian.com/t5/image/serverpage/image-id/319700iD5B199718497FC7B/image-size/large?v=v2&px=999 "Screenshot 2024-04-22 at 01.14.44.png")


author: Andrii Maliuta
body: Hello [@Mandy Wells-Lakeland](/t5/user/viewprofilepage/user-id/5479646) ,

You can try to add \`\`\`body.styled_view\`\`\` expand parameter to have the whole HTML content with styles.


Tags: cloud

confluence-cloud