Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Two CRM container #4

Open
binhudakhalid opened this issue Jan 25, 2019 · 4 comments
Open

Two CRM container #4

binhudakhalid opened this issue Jan 25, 2019 · 4 comments

Comments

@binhudakhalid
Copy link

Is it possible to put or add two CRM container in Twilio Flex

@UsmanKamal
Copy link

UsmanKamal commented Jan 28, 2019

Similar query, is it possible to add multiple URLs in a single CRM container?

If we go by this (https://www.twilio.com/docs/flex/tutorials/building-flex-plugins) example, can we add a second "flex.CRMContainer.defaultProps.uriCallback" function to render two URLs within a single CRM container? The need for this is that I want to render two URLs within Agent Desktop and " flex.AgentDesktopView.Panel1" does not give any function similar to CRM container for URL rendering.

I want to achieve something like this screenshot:

twilio - agentdesktop custom

@AdrianaPineda
Copy link

AdrianaPineda commented Aug 1, 2019

Hey @binhudakhalid @UsmanKamal, you can use Flex to add, replace, and remove any component. For example, you can remove the original CRM container and add a new one or replace the CRM container itself.
Check out our docs: https://www.twilio.com/docs/flex/components-add-replace-modify

A simple example to replace the CRM container:
Flex.CRMContainer.Content.replace(<YourComponent/>);

Your custom component will be in charge of rendering the two containers you need.

@ThomasLarge
Copy link

@binhudakhalid don't know if you got a answer but you can do this

export const CrmSplit = () => {
  return (
    <div style={{ width: "100%", height: "100%" }}>
      <div style={{ width: "100%", height: "50vh" }}>First half</div>
      <div style={{ width: "100%", height: "50vh" }}>second half</div>
    </div>
  );
};

Then this
Flex.CRMContainer.Content.replace(<CrmSplit key="CrmSplit"/>);

@Deekshaaaaa
Copy link

@UsmanKamal can you please tell me how did you implement this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants