Left sidebar appears in spite of ?layout=embedded

Community Support
1

For a special use case I want to allow users without an account read and write to chat channels. Therefore I create channels and integrate them via an iframe appending ?layout=embedded.
If the user hit “Talk as anonymous” and enters a username the left rocket.chat sidebar appears, please look at attached animation.

What I am doing wrong?
rchat_embed_layout

2

Hi!

I believe this is the expected behavior.

If you want to embed a chat into your page, you are looking into InApp Chat.

We had recently a Webinar about it:

Also, we have an ongoing project idea at Google Summer of code to implement an easy way for that:
https://docs.rocket.chat/contributors/google-summer-of-code/google-summer-of-code-2022#rocket.chat-reactjs-fullstack-component

3

Hi dudanogueira,

hmm, can’t understand why this should be the expected behavior.
All looks fine with embedded layout and if a user wants to chat left sidebar pops up - why!?

Other question, is there a way to hide some of the menupoints in left sidebar, like “search, directory or create new” button?

Thanks!

4

Hi!

You can hide them using the Custom CSS or custom script.

5

Hi,

let me come back to my initial question.

I followed your documentation Adding a Rocket.Chat Chat Room to your Web App. Another documentation with animated GIFs is following BLOG post

The screenshots inside the document are showing all embedded layout without left sidebar. I followed exactly the documentation and embedding works, but clicking with mouse into the iframe the left sidebar appears. So whats going wrong?

6

OK.

I found something. :slight_smile:

Indeed that’s not the expected behavior. Sorry! :see_no_evil:

Check, please:

  1. whenever you access http://localhost:3000/channel/general/?layout=embedded, with a guest user, it works as expected.

  2. the code provided at our docs had a mistype here:
    edit: just fixed it

<script>
    function x() {
        document.querySelector("iframe").contentWindow.postMessage(
            {
                externalCommand: "go",
                path: "/channel/general/?layout-embedded"
            },
            "http://localhost:3000"
        );
    }
</script>

Are you maybe using it? the mistype is at path, it should be

 path: "/channel/general/?layout=embedded"

this would explain this exact behavior, as it would command to go to the channel without the this layout option.

7

Hi,

I was already aware of your mentioned typo. It’s corrected at my side.

As I wrote in my first post, everything works as expected, layout is displayed in embedded mode.
But If I focus with my mouse the text entry field left sidebar appears.

Up to now I thought this must be a mistake but after player around with rocket.chat features I am unsure. If I start direct messaging with someone else, the person is displayed in left sidebar.

For me, it looks like it is not possible to complete hide left sidebar in rocket.chat!?
Can you confirm my thoughts?

8

Can you confirm this:

there can be another event sending you to http://localhost:3000/channel/general/ instead of http://localhost:3000/channel/general/?layout=embedded if that’s the case, you should see it without the iframe.

Here in my localhost, using latest 6.4.3 it worked as expected. You are using the latest, right?

9

I’m on server version: 4.6.0

Can confirm opening http://localhost:3000/channel/general/?layout=embedded all works as expected.
I can chat (sending/receiving) messages without left sidebar - so all its OK.

But If I hit my mouse into input message field at the bottom left sidebar appears (see my first post there is a animated GIF inside).
So is this behavior normal or is something wrong?
Meanwhile my thoughts are this is normal, because in left sidebar all “direct chat” partners are listed so there is no way to hide it completely.

10

I will try to Embed it and try it myself later today or next week.

This is certainly not the expected behavior, as the layout=embedded should avoid the sidebar from showing up, “locking” the rendering to the channel alone.

we are refactoring a lot of UI componentes to REACT, so this may have changed.