I want to integrate PureCloud with Vtiger CRM in such a way that:
when a customer calls, purecloud pops-up the CRM and locate customer information to make it easy for our agents to locate customer data and update it if needed.
Because the current integration which we have done based on what is mentioned in resource center here https://help.mypurecloud.com/articles/set-custom-client-application-integration/
it just pops-up the CRM but still the agent has to enter his credentials and locate customer data
It sounds like what you've currently done is simply put the base URL as the source for your custom app, with no additional processing in your app. If this is the case, then your results aren't unexpected, as you've basically just glued two separate web pages together, and they don't really communicate at this time.
There are a bunch of options for you, but they really come down to what resources are available within the CRM you are leveraging. Using your current option, you could extend the integration to listen to conversation details and execute a screenpop within the iFramed CRM (this would likely require an additional layer of code that sits "above" the CRM to perform these steps).
You could also do something similar within an Agent Script, using a dynamic property to set the correct page of the CRM to open for the agent based on conversation data.
Last on my list (although there are other options still), you could use the Embeddable Framework to embed an agent focused user interface inside of the VTiger CRM, which would give you the ability to implement screenpops, call logging, and more.