How to change "Request to join" button text to "Join Meeting" in iframe

Question

I'm new to daily-co integration in react js. Can you please suggest how to change "Request to Join" text to "Join Meeting". Thank in advance. At present in Iframe all content is coming. Can any one please suggest how to change the "Request to Join" text to "Join Meeting". My Observations: One api is calling at the time of page is loaded: https://b.daily.co/call-ui/16c545a8520b661e39dc13c62b335ffea4cb3651/locales/en/translation.js

 {  ....
    "haircheck": {
    ....
    "setup": {
    "requestToJoin": "Request to join",
    "title": "Are you ready to join?",
    }
   },
 }


//React Class component:

import React from 'react';
import DailyIframe from '@daily-co/daily-js';
import Cookies from 'universal-cookie';
import axios from '../../util/axios';
import util from '../../util/util';

const cookies = new Cookies();
class VideoCallFrame2 extends React.Component {
constructor(props) {
    super(props);
    this.iframeRef = React.createRef();
    this.state = {
        authorizationToken: 'Bearer ------------',
        roomName: '',
        room: null,
        token: null,
        rooms: [],
        roomUrlWithToken: null,
        isVideoHidden: false,
        joinedObject: null,
        status: '',
        askedQuestions: [],
    };
}

componentDidMount() {
    this.daily = DailyIframe.wrap(
        this.iframeRef.current,
        {
            showLeaveButton: true,
        });
    this.setState({
        ...this.state,
        roomUrlWithToken: this.props.meetingRoomUrl
    });
    this.startRoom();
    let temp = this.daily.meetingState();
    this.setState({ status: temp });
    this.get_candidate_position();
}

get_candidate_position = (e) => {
    this.setState({
        positionDetails: response.data.candidate[0]
    })
}
onHandleChange = (e) => {
    this.setState({
        [e.target.name]: e.target.value
    })
}
joinMeetingEvents = () => {
    // Meeting related events
    this.daily.on('loading', () => { console.log('Loading......') })
    this.daily.on('loaded', () => { console.log('Loaded......') })
    this.daily.on('joining-meeting', () => { console.log('Joining......') })
    this.daily.on('joined-meeting', () => {
        console.log('Joined......')
    })
    this.daily.on('app-message', (e) => {
        console.log('app-messageapp-message app-message>>>>>>> ', e)
    })

    this.daily.on('left-meeting', (e) => {
        console.log('Left Meeting......', e)
        this.props.history.push('/thankyou')
    })
    this.daily.on('participant-joined', (e) => {
        console.log('Partcipand Joined......', e);
        this.setState({
            ...this.state,
            isVideoHidden: true
        })
        if (this.state.joinedObject.user_id == '') {
        }
    })
    this.daily.on('error', (e) => {
        console.log('ERROR......', e)
    })
}
leftMeeeting = () => {
    this.daily.leave();
    this.daily.destroy();
}
startRoom = async () => {
    let res = await this.daily.join({
        url: this.props.meetingRoomUrl
    })
    this.setState({
        ...this.state,
        joinedObject: null
    })
    this.daily.on('loading', () => { console.log('Loading......') })
    this.daily.on('loaded', () => { console.log('Loaded......') })
    this.daily.on('joining-meeting', () => { console.log('joining-meeting......') })
    this.daily.on('joined-meeting', () => {
        console.log('Joined meeting......');
    })
    this.daily.on('joined-meeting', () => {
        console.log('Joined meeting......');
    })
    this.daily.on('meeting-session-updated', () => {
        console.log('meeting-session-updated......');
    });
    this.daily.on('access-state-updated', (evt) => {
        console.log('access-state-updated......', evt);
        if (evt.access.level == 'lobby') {
            //Some code
        }

    });
    this.daily.on('participant-joining', () => { console.log('participant-joining') })
    this.daily.on('left-meeting', (e) => {
        this.props.history.push('/thankyouPage');
    });
    this.daily.on("app-message", (e) => {
        let Arr = this.state.askedQuestions;
        if (
            e &&
            e.data &&
            e.data.message &&
            e.data.message.endInterview == "end") {
            this.leftMeeeting();
        }
    });
    this.daily.on('participant-joined', (e) => {
        console.log('Partcipand Joined......', e);
        setTimeout(() => {
            this.daily.sendAppMessage({ message: { intervieweraskedQuestions: this.state.askedQuestions } }, '*');
        }, 3000)
    })
    this.daily.on('error', (e) => {
        console.log('ERROR......', e)
    })
}
render() {
    return (
        <div className="" style={{ height: '450px' }}>
            <iframe className="Video-Frame video-call-frame"
                title="video call iframe"
                ref={this.iframeRef}
                allow="camera; microphone; fullscreen; display-capture"
            ></iframe>
        </div>
    )
}
}

export default VideoCallFrame2;

Answer 1

I work at Daily. :) "Request to join" is shown for private rooms with "knocking" enabled. We use this language because clicking the button will alert the room owner to let you in, so you do need to ask to join -- you can't just go straight in.

This can be turned off though. If you make the room public, it will say "Join meeting" instead of "Request to join" because anyone can join. Alternatively, you can make a meeting token for anyone trying to enter a private room so they don't need to ask to join. (In this case, the button text would also be updated to "Join meeting").

More generally, you can't update button text to something custom in the Daily Prebuilt UI, but you can build your on custom UI with our APIs. That's probably too much effort just to update one button, though. :)

Answer 2

I have not used daily.co before but I did a little digging and confirmed my suspicions: As far as I can tell, this is not possible.

In order to for a page to edit the contents of an iFrame, the frame must be on the same origin as its parent page, as per the Same Origin Policy.

Your page is on the origin http://localhost:3001, while the frame is on an origin owned by Daily, e.g. https://server.daily.co.

This policy exists for security reasons, an example is imagine some website https://attacker.com with a frame to https://bankaccount.com, without this policy the attacker could change a button on the frame from "Click to send all money to attacker" to "Click to receive your $1 million reward!"

The only method I have found that may be plausible after doing a couple searches for "origin", "host", etc. on docs.daily.co is this reference page for "Daily's Video Component System (VCS)", but from what I can tell this cannot solve the problem as this only allows you to add an overlay to the video call, not the frame itself.