Comments (4)
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:
from flex-ui-sample.
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.
from flex-ui-sample.
@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"/>);
from flex-ui-sample.
@UsmanKamal can you please tell me how did you implement this
from flex-ui-sample.
Related Issues (13)
- Response to preflight request doesn't pass access control check HOT 2
- react-router-redux is deprecated HOT 1
- npm install fails on attempt to install @twilio/twilio-flex-insights HOT 1
- Not Found: @twilio/frame-ui@^0.16.0 HOT 3
- error Couldn't find package "@twilio/frame-ui@^0.23.1" required by "@twilio/flex-ui@^1" on the "npm" registry HOT 2
- Can't use react-hot-loader HOT 2
- Not able to add custom redux store HOT 3
- Where to instantiate a flex plugin in this sample? HOT 3
- Dependancy is not getting resolve with react-intl and typescript
- changing twilio flex login view logo HOT 1
- Project failed to compile using node v16.13.1 and npm v8.1.2 HOT 2
- This sample is not working anymore with Node v20
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from flex-ui-sample.